:root{
  --bg:#0b0c10;
  --panel:#11131a;
  --card:#151827;
  --ink:#e9ecf3;
  --muted:#9aa3b2;
  --line:rgba(255,255,255,.10);
  --accent:#6ee7ff;
  --danger:#ff5c77;
  --ok:#3ee07b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 20% -10%, rgba(110,231,255,.15), transparent 55%),
             radial-gradient(1000px 500px at 90% 10%, rgba(110,231,255,.10), transparent 55%),
             var(--bg);
  color:var(--ink);
}

a{color:inherit; text-decoration:none}
h2,h3{margin:0 0 6px}
.muted{color:var(--muted)}
.tiny{font-size:12px}
.mt8{margin-top:8px}
.mt12{margin-top:12px}
.mt16{margin-top:16px}

.app{display:flex; min-height:100%}
.topbar{
  position:fixed; top:0; left:0; right:0;
  height:64px;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background:rgba(10,11,15,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  z-index:50;
}

.hamburger{
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.hamburger span{display:block; width:18px; height:2px; background:var(--ink); opacity:.9; border-radius:2px}

.brand{display:flex; align-items:center; gap:10px; min-width:0}
.logo{
  width:40px; height:40px; border-radius:14px;
  background:linear-gradient(135deg, rgba(110,231,255,.3), rgba(110,231,255,.05));
  border:1px solid rgba(110,231,255,.35);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.brandtext{min-width:0}
.brandtext .name{font-weight:650; letter-spacing:.2px}
.brandtext .sub{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw}

.top-actions{margin-left:auto; display:flex; align-items:center; gap:10px}
.pill{
  padding:8px 10px; border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  font-size:13px;
}

.sidenav{
  position:fixed; top:64px; left:0; bottom:0;
  width:280px;
  background:rgba(17,19,26,.95);
  backdrop-filter: blur(10px);
  border-right:1px solid var(--line);
  transform: translateX(-105%);
  transition: transform .22s ease;
  z-index:60;
  display:flex; flex-direction:column;
}
.sidenav.open{transform: translateX(0)}
.navhdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px;
  border-bottom:1px solid var(--line);
}
.navtitle{font-weight:650}
.nav{padding:10px; display:flex; flex-direction:column; gap:8px}
.navlink{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.navlink:hover{border-color:rgba(110,231,255,.35)}
.navfoot{margin-top:auto; padding:12px; border-top:1px solid var(--line)}

.main{
  width:100%;
  padding:88px 12px 24px;
  max-width:1100px;
  margin:0 auto;
}

.toast{
  padding:12px 14px;
  border-radius:14px;
  margin:10px 0 12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.toast.ok{border-color:rgba(62,224,123,.4)}
.toast.err{border-color:rgba(255,92,119,.4)}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.right{justify-content:flex-end}
.row.between{justify-content:space-between}

.grid{display:grid; gap:12px}
.grid.two{grid-template-columns: 1fr}
@media (min-width:900px){
  .grid.two{grid-template-columns: 1fr 1fr}
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
.cardlink{transition: transform .12s ease, border-color .12s ease}
.cardlink:hover{transform: translateY(-2px); border-color:rgba(110,231,255,.35)}
.hd{
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.bd{padding:14px}

.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:rgba(0,0,0,.15);
}

.help{
  color:var(--muted);
  line-height:1.4;
  font-size:14px;
}

.input{
  width:100%;
  background:rgba(0,0,0,.25);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
textarea.input{min-height:140px; resize:vertical}
label{display:block; margin-top:10px; margin-bottom:6px; color:var(--muted); font-size:13px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(110,231,255,.35);
  background:rgba(110,231,255,.10);
  color:var(--ink);
  font-weight:650;
  cursor:pointer;
}
.btn:hover{border-color:rgba(110,231,255,.55)}
.btn.secondary{
  border-color:var(--line);
  background:rgba(255,255,255,.04);
  font-weight:600;
}
.btn.ghost{
  border-color:var(--line);
  background:transparent;
  font-weight:600;
}
.btn.danger{
  border-color:rgba(255,92,119,.55);
  background:rgba(255,92,119,.12);
}
.btn.small{padding:8px 10px; border-radius:12px; font-size:13px}

.sectionrow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(0,0,0,.18);
  margin-bottom:10px;
}
.secmeta{min-width:0}
.sectitle{font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52vw}
.secactions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

.preview{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:rgba(0,0,0,.18);
}
.preview h1,.preview h2,.preview h3{margin:10px 0 6px}
.preview p{margin:8px 0}
.preview ul,.preview ol{margin:8px 0 8px 22px}
.preview blockquote{
  margin:8px 0;
  padding:10px 12px;
  border-left:3px solid rgba(110,231,255,.45);
  background:rgba(255,255,255,.03);
  border-radius:12px;
}
.preview code{
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.06);
}

body.nav-open:before{
  content:"";
  position:fixed; top:64px; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.45);
  z-index:55;
}


/* -------- Workspace (Phase 3) -------- */

.main.full{max-width:none; padding:72px 0 0;}

.ws{
  height: calc(100vh - 72px);
  display:flex;
  flex-direction:column;
}
.wsbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:rgba(17,19,26,.82);
  backdrop-filter: blur(8px);
}
.wsbar-left{display:flex; align-items:center; gap:10px; min-width:0;}
.wsbar-title{min-width:0;}
.wsbar-h{font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wsbar-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wsbar-right{display:flex; align-items:center; gap:8px;}

.wsshell{
  flex:1;
  display:grid;
  grid-template-columns: 1fr;
  position:relative;
  min-height:0;
}

.wscenter{
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:12px;
  gap:10px;
}

.wstoolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.wstools{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.wstools .sep{width:1px; height:18px; background:var(--line); display:inline-block; margin:0 4px;}
.wsmodes{display:flex; gap:6px; flex-wrap:wrap;}

.wsmeta{
  display:flex;
  gap:10px;
  align-items:center;
}
.wsmeta input{flex:1; min-width:0;}
.wsstatus{min-width:110px; text-align:right;}

.wsedit{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.wseditor{
  width:100%;
  min-height:0;
  height:100%;
  resize:none;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  border-radius:16px;
  padding:12px;
  color:var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:14px;
  line-height:1.5;
}
.wspreview{
  width:100%;
  min-height:0;
  height:100%;
  overflow:auto;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
}

.wsfooter{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.wspanel{
  position:absolute;
  top:0; bottom:0;
  width:min(86vw, 360px);
  background:rgba(17,19,26,.96);
  border-right:1px solid var(--line);
  border-left:1px solid var(--line);
  z-index:30;
  transform: translateX(-110%);
  transition: transform .18s ease;
  display:flex;
  flex-direction:column;
}
.wspanel.right{
  right:0;
  left:auto;
  transform: translateX(110%);
  border-right:none;
  border-left:1px solid var(--line);
}
.wspanel.open{
  transform: translateX(0);
}
.wspanel-hd{padding:12px; border-bottom:1px solid var(--line);}
.wspanel-bd{padding:10px 12px; overflow:auto; min-height:0;}
.wspanel-ft{padding:10px 12px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px;}

.olitem{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:10px;
  margin-bottom:8px;
  cursor:pointer;
}
.olitem.active{border-color:rgba(110,231,255,.42); box-shadow:0 0 0 3px rgba(110,231,255,.08);}
.oltop{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.oltitle{font-weight:800; line-height:1.2;}
.olmeta{font-size:12px; color:var(--muted); margin-top:4px;}
.olactions{display:flex; gap:6px; align-items:center; flex-shrink:0;}
.handle{cursor:grab; opacity:.8;}
.warnDot{display:inline-block; width:8px; height:8px; border-radius:999px; background:var(--danger); margin-right:6px; vertical-align:middle;}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:14px;
  z-index:80;
}
.modalcard{
  width:min(700px, 100%);
  background:rgba(17,19,26,.98);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  max-height:84vh;
  overflow:auto;
}

@media (min-width: 980px){
  .wsshell{grid-template-columns: 320px 1fr 360px;}
  .wspanel{position:relative; transform:none; width:auto; border-right:1px solid var(--line); border-left:none;}
  .wspanel.left{grid-column:1;}
  .wscenter{grid-column:2;}
  .wspanel.right{grid-column:3; border-left:1px solid var(--line); border-right:none;}
  .wspanel.right{transform:none;}
  .wspanel-hd .btn.ghost{display:none;}
  #wsLeft,#wsRight{aria-hidden:false;}
  .wsedit.split{grid-template-columns: 1fr 1fr;}
  .wsbar-left .btn.icon.ghost{display:none;}
}

.grid2{display:grid;gap:12px}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}


/* ---------------- Phase 5 UI ---------------- */
.seg { display:flex; border:1px solid #e5e5e5; border-radius:999px; overflow:hidden; background:#fff; }
.segbtn { border:0; background:transparent; padding:6px 10px; cursor:pointer; }
.segbtn.active { background:#111; color:#fff; }

.wscards { padding:8px 2px 12px; }
.wscards-h { font-weight:700; margin:14px 2px 8px; }
.wscards-grid { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width: 560px) { .wscards-grid { grid-template-columns:1fr 1fr; } }
.wscard { text-align:left; border:1px solid #eaeaea; background:#fff; border-radius:14px; padding:12px; box-shadow:0 1px 0 rgba(0,0,0,.03); cursor:pointer; }
.wscard:hover { border-color:#d7d7d7; }
.wscard-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.wscard-title { font-weight:800; }
.wscard-syn { margin-top:8px; color:#333; font-size:13px; line-height:1.35; }

/* Preview page */
.pvwrap { width:100%; }
.pvbar { position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #eee; padding:10px 12px; display:flex; gap:10px; align-items:center; justify-content:space-between; }
.pvbar .pvbar-left { display:flex; gap:10px; align-items:center; min-width: 180px; }
.pvbar .pvbar-title { font-weight:800; }
.pvbar .pvbar-right { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.pvbody { display:grid; grid-template-columns: 1fr; gap:12px; padding:12px; }
@media (min-width: 980px) { .pvbody { grid-template-columns: 320px 1fr; } }
.pvside { border:1px solid #eee; border-radius:14px; padding:12px; background:#fff; }
.pvviewer { border:1px solid #eee; border-radius:14px; background:#fafafa; padding:12px; overflow:auto; min-height: 70vh; }
.pvpages { display:flex; flex-direction:column; gap:16px; align-items:center; transform-origin: top center; transform: scale(var(--pv-scale, 1)); }
.pvpage { background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.06); }
.pvpad { height:100%; box-sizing:border-box; display:flex; flex-direction:column; }
.pvhead { font-size:11px; color:#444; display:flex; justify-content:space-between; padding-bottom:8px; border-bottom:1px solid #f1f1f1; margin-bottom:10px; }
.pvcontent { flex:1; overflow:hidden; font-family: "Times New Roman", Times, serif; font-size: 12pt; line-height: 1.25; color:#111; }
.pvcontent.overflow { outline:2px dashed #e59a00; outline-offset:4px; }
.pvfoot { font-size:11px; color:#444; padding-top:8px; border-top:1px solid #f1f1f1; margin-top:10px; text-align:center; }
.pv-tocbox { border:1px dashed #bbb; padding:12px; border-radius:10px; background:#fff; }
.pv-tocnote { font-size:13px; color:#333; }
.pv-dedication { text-align:center; margin-top: 80px; }
.pvwarn { border:1px solid #eee; border-left:4px solid #999; background:#fff; border-radius:10px; padding:10px; margin-bottom:10px; font-size:13px; }
.pvwarn.warn { border-left-color:#e59a00; }
.pvwarn.info { border-left-color:#3b82f6; }


/* === Fixed cover background (works on iPhone/Safari) ===
   iOS Safari does not reliably support background-attachment: fixed.
   This puts the background on a fixed pseudo-element behind the app.
*/
html{ background: var(--bg); }

body{
  min-height: 100vh;
  position: relative;
}

/* Put the body background onto a fixed layer */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0); /* iOS stability */
}

/* Optional subtle dark overlay for readability */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(0,0,0,0.22);
}