/* Plain CSS, no frameworks. No backdrop-filter / big shadows over the canvas: they cost a composite per frame on iPad. */
:root {
  --bg: #f2f2f7; --card: #fff; --text: #1c1c1e; --muted: #8e8e93; --line: #d1d1d6;
  --blue: #0a6cff; --blue-soft: #e6f0ff; --danger: #e5383b; --stage: #e7e9ee;
  --r: 12px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; position: fixed; inset: 0; overscroll-behavior: none;
  font: 15px/1.35 var(--font); color: var(--text); background: var(--bg);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
input, select { font: inherit; color: inherit; }
input, textarea { -webkit-user-select: text; user-select: text; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- shared controls ---------- */
.btn { padding: 9px 18px; border-radius: 10px; background: #e5e5ea; font-weight: 600; }
.btn.primary { background: var(--blue); color: #fff; }
.field { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; outline: none; }
.field:focus { border-color: var(--blue); }
.pill { appearance: none; -webkit-appearance: none; padding: 7px 30px 7px 14px; border-radius: 999px; border: 0; background: #e9e9ee
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 10px center / 14px no-repeat; font-weight: 500; }
.seg { display: inline-flex; background: #e9e9ee; border-radius: 10px; padding: 2px; gap: 2px; }
.seg button { padding: 6px 12px; border-radius: 8px; display: flex; align-items: center; gap: 4px; color: #3a3a3c; }
.seg button.on { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); color: var(--text); }
.seg svg { width: 18px; height: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 11px; border-radius: 999px; background: #e9e9ee; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--blue); color: #fff; }
.mini-sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); display: inline-block; }
.muted { color: var(--muted); margin: 8px 0; }
.link { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); font-weight: 500; }
.link svg { width: 20px; height: 20px; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--blue); }
.icon-btn.on { background: var(--blue-soft); }
.row { display: flex; align-items: center; gap: 4px; }

/* ---------- library ---------- */
#library { position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
  padding: calc(var(--safe-t) + 10px) max(20px, 4vw) calc(var(--safe-b) + 40px); }
.lib-head { max-width: 1200px; margin: 0 auto; }
.lib-top { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
.lib-head h1 { font-size: 34px; font-weight: 700; margin: 4px 0 10px; letter-spacing: -.5px; }
.sync-st { font-size: 13px; margin-right: 6px; color: var(--muted); }
.sync-st.signin, .sync-st.error { color: var(--danger); }
.sync-st[hidden] { display: none; }
.search { margin-bottom: 10px; }
.lib-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 14px; border-bottom: 1px solid var(--line); }
.new-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px 8px 12px; border-radius: 999px; }
.new-btn svg { width: 18px; height: 18px; stroke-width: 2.4; }
.lib-grid { max-width: 1200px; margin: 24px auto 0; display: grid; gap: 28px 20px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 60px 0; }
.item { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.item-thumb { width: 100%; height: 190px; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; }
.thumb-wrap { position: relative; }
.item-title { margin-top: 10px; display: inline-flex; align-items: center; gap: 2px; max-width: 100%; color: var(--blue); font-weight: 600; font-size: 14px; }
.item-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-title svg { width: 16px; height: 16px; stroke-width: 2.2; }
.item-date { color: var(--muted); font-size: 12px; margin-top: 2px; }
.star { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; display: grid; place-items: center; color: #c7c7cc; }
.star svg { width: 20px; height: 20px; fill: #fff; }
.star.on { color: #f5b400; }
.star.on svg { fill: #f5b400; }

/* covers: --c is the cover color */
.cover { width: 132px; height: 176px; border-radius: 4px 10px 10px 4px; background: var(--c); position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 4px 10px rgba(0, 0, 0, .08); }
.cover::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: rgba(0, 0, 0, .12); }
.cover-plain::before { display: none; }
.cover-grid { background-image: linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px); background-size: 14px 14px; }
.cover-dots { background-image: radial-gradient(rgba(255, 255, 255, .35) 1.5px, transparent 1.6px); background-size: 12px 12px; }
.cover i { position: absolute; display: block; font-style: normal; }
.cv-line { left: 22px; right: 16px; top: 28px; height: 3px; background: rgba(255, 255, 255, .55); border-radius: 2px; }
.cv-lines { left: 22px; right: 40px; top: 40px; height: 8px; border-top: 2px solid rgba(255, 255, 255, .35); border-bottom: 2px solid rgba(255, 255, 255, .35); }
.cv-label { left: 20px; right: 12px; top: 34%; padding: 8px 6px; background: rgba(255, 255, 255, .92); border-radius: 4px; color: #333; font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 32px; }
.folder { width: 150px; height: 118px; position: relative; }
.folder i { position: absolute; display: block; }
.f-tab { left: 0; top: 0; width: 58px; height: 22px; border-radius: 8px 8px 0 0; background: var(--c); filter: brightness(.82); }
.f-paper { left: 8px; right: 8px; top: 12px; height: 40px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.f-body { left: 0; right: 0; top: 18px; bottom: 0; border-radius: 4px 10px 10px 10px; background: var(--c); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }

/* ---------- popovers / menus / color picker ---------- */
.backdrop { position: fixed; inset: 0; z-index: 50; }
.pop { position: fixed; z-index: 51; background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .05); padding: 6px; max-height: 80vh; overflow-y: auto; }
.menu { display: flex; flex-direction: column; min-width: 220px; }
.menu button { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; padding: 10px 12px; border-radius: 8px; }
.menu button:not(:disabled):hover, .menu button:not(:disabled):active { background: #f0f0f4; }
.menu .danger { color: var(--danger); }
.menu .check { color: var(--blue); width: 14px; }
.menu hr { border: 0; border-top: 1px solid #e5e5ea; margin: 4px 6px; }
.cp { width: 320px; padding: 6px 8px 10px; display: flex; flex-direction: column; gap: 10px; }
.cp-title { font-weight: 700; text-align: center; padding-top: 4px; }
.cp .seg { align-self: stretch; }
.cp .seg button { flex: 1; justify-content: center; }
.cp-body { display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.cp-row { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.csw { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.csw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }
.cp-custom { display: flex; gap: 8px; align-items: center; }
.cp-prev { width: 44px; height: 44px; border-radius: 50%; flex: none; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.cp-prev input { position: absolute; inset: -10px; width: 200%; height: 200%; opacity: 0; cursor: pointer; }
.hex { font-family: ui-monospace, Menlo, monospace; }
.size-pop { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.size-pop input { width: 200px; }
.size-val { min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

/* ---------- notebook dialog ---------- */
.modal { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .35); display: grid; place-items: center; padding: 16px; }
.dialog { background: #fff; border-radius: 16px; width: min(980px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.dialog.paper-only { width: min(760px, 100%); }
.dlg-cols { display: flex; min-height: 0; flex: 1; }
.dlg-side { width: 250px; flex: none; padding: 18px; background: #f7f7fa; border-right: 1px solid #e5e5ea; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.dlg-side label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 6px; }
.dlg-cover { display: flex; justify-content: center; padding: 6px 0; }
.dlg-paper { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.dlg-paper canvas, .tpl-thumb canvas { display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08); }
.dlg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dlg-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 18px; border-bottom: 1px solid #e5e5ea; }
.tpl-grid { flex: 1; overflow-y: auto; padding: 8px 18px 18px; touch-action: pan-y; }
.tpl-group { font-weight: 700; margin: 12px 0 10px; }
.tpl-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.tpl { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-radius: 10px; font-size: 13px; }
.tpl-thumb { height: 144px; display: flex; align-items: center; }
.tpl.on { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.tpl.on canvas { box-shadow: 0 0 0 2px var(--blue); }
.dlg-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #e5e5ea; }
.dlg-foot > :first-child { margin-right: auto; }
.scope { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) {
  .dlg-cols { flex-direction: column; overflow-y: auto; }
  .dlg-side { width: auto; border-right: 0; border-bottom: 1px solid #e5e5ea; }
  .tpl-grid { overflow: visible; }
}

/* ---------- editor ---------- */
#editor { position: fixed; inset: 0; background: var(--stage); }
#stage { position: absolute; inset: 0; touch-action: none; overflow: hidden; }
#stage canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
#ebar { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 6px) 10px 6px; background: #fbfbfd; border-bottom: 1px solid #dcdce2; }
#ebar button { height: 38px; min-width: 38px; border-radius: 10px; display: grid; place-items: center; color: #3a3a3c; }
#ebar button.on { background: var(--blue-soft); color: var(--blue); }
.ebar-l, .ebar-r { display: flex; align-items: center; gap: 2px; flex: 1 1 0; min-width: 0; }
.ebar-r { justify-content: flex-end; }
.ebar-c { display: flex; align-items: center; gap: 2px; flex: none; }
#eback { color: var(--blue) !important; }
#ebar .etitle { display: block; font-weight: 600; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
.sep { width: 1px; height: 24px; background: #d1d1d6; margin: 0 6px; }
.group { display: flex; align-items: center; gap: 2px; }
#ebar .sw { min-width: 30px; width: 30px; height: 30px; border-radius: 50%; margin: 0 1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
#ebar .sw.on { box-shadow: 0 0 0 2px #fbfbfd, 0 0 0 4px var(--blue); background-clip: padding-box; }
#swatches:not(:empty) { margin-right: 8px; }
.dot { display: block; border-radius: 50%; }
.ring { display: block; border-radius: 50%; border: 2px solid currentColor; }
#pageind { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 14px); transform: translateX(-50%); z-index: 5;
  padding: 6px 14px; border-radius: 999px; background: rgba(40, 40, 46, .78); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  #ebar { flex-wrap: wrap; }
  .ebar-c { order: 3; width: 100%; justify-content: center; }
  #ebar .etitle { display: none; }
}

#toast { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 60px); transform: translate(-50%, 20px); z-index: 100; pointer-events: none; opacity: 0;
  background: rgba(30, 30, 34, .92); color: #fff; padding: 9px 16px; border-radius: 10px; font-size: 14px; transition: opacity .2s, transform .2s; max-width: 90vw; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.dialog.small { width: min(380px, 100%); }
.small-body { padding: 18px 18px 8px; }
.small-body h3 { margin: 0 0 12px; font-size: 17px; }
.small-body .muted { margin: 0; }
.btn.primary.danger { background: var(--danger); }

/* ---------- text tool ---------- */
.tedit { position: absolute; z-index: 4; transform-origin: 0 0;
  outline: calc(var(--s, 1) * 1.5px) dashed var(--blue); outline-offset: calc(var(--s, 1) * 4px); }
.tta { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; resize: none; overflow: hidden;
  outline: none; white-space: pre-wrap; overflow-wrap: break-word; caret-color: var(--blue);
  -webkit-user-select: text; user-select: text; -webkit-appearance: none; appearance: none; }
.thandle { position: absolute; right: calc(var(--s, 1) * -17px); top: 50%; width: calc(var(--s, 1) * 20px); height: calc(var(--s, 1) * 20px);
  margin-top: calc(var(--s, 1) * -10px); border-radius: 50%; background: var(--blue); touch-action: none;
  box-shadow: 0 0 0 calc(var(--s, 1) * 2px) #fff; }
.aglyph { display: block; font-weight: 700; font-family: Georgia, serif; line-height: 1; }
#ebar button.aa { font-weight: 600; font-size: 15px; margin-left: 4px; }
.fmt { display: flex; flex-direction: column; gap: 6px; padding: 4px; min-width: 230px; }
.fmt-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.fmt-row { display: flex; align-items: center; gap: 4px; }
.fmt button { height: 38px; min-width: 38px; padding: 0 10px; border-radius: 10px; background: #f2f2f7; color: #1c1c1e; }
.fmt button.on { background: var(--blue-soft); color: var(--blue); }
.size-lab { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; opacity: .8; }
.size-in { width: 58px; height: 30px; box-sizing: border-box; padding: 0 6px; font: inherit; font-size: 16px; border: 1px solid var(--line, #cbd5e1); border-radius: 8px; background: transparent; color: inherit; text-align: right; }

/* login.html */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; background: var(--bg); }
.login-box { padding: 24px; gap: 12px; }
.login-box h2 { margin: 0; }
.login-err { color: var(--danger); margin: 0; }
.login-box .field { font-size: 16px; -webkit-user-select: text; user-select: text; }