:root{
  --bg:#F2F3F4; --paper:#FFFFFF; --paperWarm:#F7F7F7;
  --primary:#2B2B2B; --secondary:#12C5D9; --accent:#FF4D4D;
  --border: rgba(43,43,43,.12); --line: rgba(43,43,43,.10);
  --shadow: 0 20px 70px rgba(0,0,0,.18);
  --radius: 18px;
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:radial-gradient(1200px 700px at 50% 10%, rgba(18,197,217,.10), rgba(0,0,0,0) 60%), var(--bg);color:var(--primary);}
button,select,input,textarea{font:inherit}
button{border:1px solid var(--border);background:rgba(255,255,255,.92);padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:900}
button.primary{background:var(--primary);color:#fff;border-color:rgba(43,43,43,.35)}
button.ghost{background:transparent}
button.jump{background:rgba(43,43,43,.06);border-color:rgba(43,43,43,.20);padding:8px 12px;border-radius:999px;font-size:12px;font-weight:1000}
button.jump:hover{background:rgba(43,43,43,.10)}
select,input[type=date],input[type=datetime-local],input[type=password],input[type=text]{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fff}
textarea{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fff;resize:vertical}
.app{min-height:100vh;display:flex;justify-content:center;padding:16px}
.shell{width:min(1240px,100%);display:flex;flex-direction:column;gap:12px}
.topbar{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.9);backdrop-filter: blur(10px)}
.brand{display:flex;gap:10px;align-items:center;font-weight:1100}
.brandDot{width:10px;height:10px;border-radius:999px;background:var(--secondary)}
.badge{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:#6b7280;font-weight:900}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* Book */
.bookWrap{display:flex;justify-content:center}
.book{
  width: min(1240px, 100%);
  border:1px solid rgba(43,43,43,.18);
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,0) 6%, rgba(0,0,0,0) 94%, rgba(0,0,0,.06)),
              linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.spine{
  position:absolute; top:0; bottom:0; left:50%; width:20px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(43,43,43,.15), rgba(255,255,255,0), rgba(43,43,43,.15));
  opacity:.35; pointer-events:none;
}
.pages{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:740px}
@media(max-width:860px){ .pages{grid-template-columns:1fr;min-height:auto} .spine{display:none} }

/* --- Page turn animation (flip) --- */
.book{perspective:1400px}
.pages{transform-style:preserve-3d}

.pages.turn-next .page.right{
  animation: fwFlipRightNext .72s cubic-bezier(.4,0,.2,1) both;
  transform-origin:left center;
}
.pages.turn-next .page.left{
  animation: fwFlipLeftNext .72s cubic-bezier(.4,0,.2,1) both;
}
.pages.turn-prev .page.left{
  animation: fwFlipLeftPrev .72s cubic-bezier(.4,0,.2,1) both;
  transform-origin:right center;
}
.pages.turn-prev .page.right{
  animation: fwFlipRightPrev .72s cubic-bezier(.4,0,.2,1) both;
}

@keyframes fwFlipRightNext{
  from{transform:rotateY(0deg);filter:brightness(1)}
  to{transform:rotateY(-160deg);filter:brightness(.92)}
}
@keyframes fwFlipLeftNext{
  from{transform:translateX(0)}
  to{transform:translateX(-18px)}
}
@keyframes fwFlipLeftPrev{
  from{transform:rotateY(0deg);filter:brightness(1)}
  to{transform:rotateY(160deg);filter:brightness(.92)}
}
@keyframes fwFlipRightPrev{
  from{transform:translateX(0)}
  to{transform:translateX(18px)}
}
.page{
  background: var(--paperWarm);
  padding: 16px;
  position:relative;
}
.page.right{background: var(--paper); border-left:1px solid rgba(43,43,43,.10)}
@media(max-width:860px){ .page.right{border-left:none;border-top:1px solid rgba(43,43,43,.10)} }
.pageTop{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 10px 12px;
  align-items:start;
  padding: 6px 6px 12px 6px;
  border-bottom: 1px solid rgba(43,43,43,.12);
}
.pageTop .titleBlock{grid-column:1; grid-row:1 / span 2; min-width:0;}
.dateNav{
  grid-column:2;
  grid-row:1;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.h1{font-size:18px;font-weight:1100;margin:0;line-height:1.25}
.h2{font-size:12px;font-weight:900;color:#6b7280;margin:0 0 2px;line-height:1.25}
.subline{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(43,43,43,.14);
  background: rgba(255,255,255,.70);
  font-size:11px;
  color:#6b7280;
  font-weight:900
}
.pill .dot{width:8px;height:8px;border-radius:999px;background:var(--secondary);display:inline-block}
.pill .dot.us{background:var(--accent)}
/* Timeline */
.timeline{margin-top:10px}
.slot{display:flex;gap:10px;padding:10px 10px;border-bottom:1px solid rgba(43,43,43,.08);cursor:pointer;border-radius:12px}
.slot:hover{background:rgba(18,197,217,.06)}
.time{width:56px;flex:0 0 56px;font-weight:1100}
.lines{
  flex:1; min-height:44px; border-radius:12px;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 22px, rgba(43,43,43,.07) 22px, rgba(43,43,43,.07) 23px);
}
.preview{margin-top:6px;font-size:12px;color:#6b7280;font-weight:700}
/* Right page editor */
.panelHeader{display:flex;justify-content:space-between;align-items:center;gap:10px}
.kbd{font-size:12px;padding:3px 8px;border:1px solid var(--border);border-radius:999px;color:#6b7280;font-weight:900;background:rgba(255,255,255,.70)}
.sectionTitle{font-weight:1100;margin:12px 0 6px}
.photoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:860px){ .photoGrid{grid-template-columns:repeat(2,1fr)} }
.photo{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}
.photo img{width:100%;height:110px;object-fit:cover;display:block}
/* Poster page */
.posterHero{
  border:1px dashed rgba(43,43,43,.22);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(18,197,217,.06);
}
.posterImg{width:100%;height:min(520px,55vh);object-fit:contain;display:block;background:#fff}
.posterImg.posterFull{height:min(980px,82vh);}
.posterText{padding:14px}
.posterTitle{font-size:22px;font-weight:1200;margin:0 0 4px}
.posterSub{margin:0;color:#6b7280;font-weight:800}
/* Modal */
.modalBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:16px;z-index:9999;overflow:auto}
.modal{width:min(860px,100%);background:#fff;border-radius:18px;border:1px solid var(--border);box-shadow:0 30px 90px rgba(0,0,0,.28);overflow:hidden;max-height:90vh;display:flex;flex-direction:column}
.modalTop{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modalBody{padding:14px;overflow:auto;flex:1}
.small{font-size:12px;color:#6b7280;font-weight:700}
/* Lock */
.center{display:flex;justify-content:center}
.card{border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:var(--shadow);overflow:hidden}
.cardHeader{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
.cardBody{padding:14px}


/* v2.3 UI density fixes */
.sectionTitle{ font-size:12px !important; letter-spacing:.2px; }
.small{ font-size:12px !important; }
select, input, textarea{ font-size:14px !important; }
.pageTop .h2{ font-size:12px !important; }
.pageTop .h1{ font-size:22px !important; }
.pill{ font-size:12px !important; }

#agendaNote{ min-height: 420px !important; height: 420px !important; }


/* v2.3 attachments */
.thumbGrid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-top:8px; }
.thumb{ position:relative; width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12); }
.thumbX{ position:absolute; top:6px; right:6px; border:none; border-radius:10px; padding:4px 7px; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; }
.stickyGrid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-top:10px; }
.sticky{ position:relative; padding:12px 12px 28px 12px; border-radius:14px; color:#1a1a1a; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.stickyX{ position:absolute; bottom:8px; right:8px; border:none; border-radius:10px; padding:4px 8px; background:rgba(0,0,0,.35); color:#fff; cursor:pointer; }
@media (max-width: 980px){
  .thumbGrid{ grid-template-columns: repeat(3, 1fr); }
  .stickyGrid{ grid-template-columns: 1fr; }
}


/* --- Classic-ish page flip (enhanced) --- */
.pages.turn-next .page.right{animation: fwFlipRightNext .72s cubic-bezier(.4,0,.2,1) both; transform-origin:left center;}
.pages.turn-next .page.left{animation: fwFlipLeftNext .72s cubic-bezier(.4,0,.2,1) both;}
.pages.turn-prev .page.left{animation: fwFlipLeftPrev .72s cubic-bezier(.4,0,.2,1) both; transform-origin:right center;}
.pages.turn-prev .page.right{animation: fwFlipRightPrev .72s cubic-bezier(.4,0,.2,1) both;}
@keyframes flipRightNext{
  from{transform-origin:left center;transform:perspective(1200px) rotateY(0deg);}
  to{transform-origin:left center;transform:perspective(1200px) rotateY(-12deg);}
}
@keyframes flipLeftNext{
  from{transform:translateX(0);}
  to{transform:translateX(-6px);}
}
@keyframes flipLeftPrev{
  from{transform-origin:right center;transform:perspective(1200px) rotateY(0deg);}
  to{transform-origin:right center;transform:perspective(1200px) rotateY(12deg);}
}
@keyframes flipRightPrev{
  from{transform:translateX(0);}
  to{transform:translateX(6px);}
}

.brandLogo{width:34px;height:34px;object-fit:contain;display:block}


/* --- Poster pages: clean layout (no titles) --- */
.posterPage{ position:relative; }
.posterPage .posterNav{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:8px;
  align-items:center;
  z-index:10;
}
.posterPage .posterHero{ padding-top:54px; }

/* --- Marconique footer (legal links) --- */
.marc-footer{
  position:fixed; left:0; right:0; bottom:0;
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(0,0,0,.08);
  z-index: 9999;
}
.marc-footer__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size: 13px;
}
.marc-footer__brand{ font-weight:900; color: var(--ink); }
.marc-footer__sep{ opacity:.45; margin: 0 6px; }
.marc-footer__link{
  color: var(--ink);
  text-decoration:none;
  font-weight:800;
  opacity:.75;
  margin-right:10px;
}
.marc-footer__link:hover{ opacity:1; text-decoration:underline; }
.marc-footer__right{ display:flex; gap:8px; }
.marc-lang{
  border:1px solid rgba(0,0,0,.16);
  background:transparent;
  color:var(--ink);
  padding:5px 10px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.marc-lang.active{
  background: var(--accent2);
  border-color: transparent;
  color:#1a0b0b;
}
@media (max-width:520px){
  .marc-footer__left{ display:flex; flex-wrap:wrap; row-gap:4px; }
}


/* --- LinkedIn footer under posters --- */
.posterMeta{
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(43,43,43,.10);
  background: rgba(255,255,255,.80);
}
.posterLink{
  display:inline-block;
  font-weight: 1000;
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  opacity: .85;
}
.posterLink:hover{ text-decoration: underline; opacity: 1; }
.posterTags{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: #6b7280;
  font-weight: 800;
  word-break: break-word;
}