@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=EB+Garamond:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@400;500;600;700&family=Lora:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Merriweather:wght@400;700&family=Playfair+Display:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Spectral:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --ink: #171816;
  --ink-2: #343630;
  --muted: #73766d;
  --paper: #fffefa;
  --ground: #eeece6;
  --line: #d9d7cf;
  --white-line: rgba(255,255,255,.12);
  --lime: #d7ff5f;
  --violet: #6f61ff;
  --coral: #ff745c;
  --blue: #4b8cff;
  --shadow: 0 20px 55px rgba(29,31,27,.16);
  --radius: 16px;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: var(--ground);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ground); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible { outline: 3px solid rgba(111,97,255,.42); outline-offset: 2px; }
.icon { width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.landing { min-height: 100vh; background: #f7f5ef; }
.landing-nav { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; border-bottom: 1px solid var(--line); background: rgba(247,245,239,.9); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.04em; font-size: 22px; }
.brand-mark { flex:0 0 auto; width: 31px; height: 31px; border-radius: 7px; background: transparent url('/librete-logo.png?v=20260821') center / 185% auto no-repeat; color: transparent; display: grid; place-items: center; font-family: "Fraunces"; font-size: 0; }
.nav-actions { display: flex; gap: 10px; }
.btn { border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; transition: transform .15s, background .15s, border .15s; }
.btn:hover { transform: translateY(-1px); border-color: #aaa89f; }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: #2c2e29; }
.btn.lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn.ghost { background: transparent; }
.btn.danger { color: #a02c20; background: #fff3f0; border-color: #ffd3ca; }
.btn.small { min-height: 34px; padding: 0 11px; font-size: 13px; border-radius: 9px; }
.btn.icon-only { width: 38px; padding: 0; }

.hero { display: grid; grid-template-columns: 1.05fr .95fr; min-height: calc(100vh - 74px); }
.hero-copy { padding: 9vw 5vw 7vw 7vw; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: 12px; font-weight: 700; color: var(--violet); margin: 0 0 18px; }
.hero h1 { font: 600 clamp(54px, 7vw, 104px)/.9 "Fraunces", serif; letter-spacing: -.065em; margin: 0 0 30px; max-width: 780px; }
.hero h1 em { color: var(--violet); font-style: normal; }
.hero-lead { max-width: 610px; font-size: clamp(17px, 2vw, 22px); line-height: 1.55; color: #5d6058; margin: 0 0 34px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-proof { margin-top: 48px; display: flex; gap: 32px; flex-wrap: wrap; }
.proof-item strong { display: block; font: 600 26px "Fraunces"; }
.proof-item span { color: var(--muted); font-size: 13px; }
.hero-visual { min-height: 720px; background: var(--ink); display: grid; place-items: center; overflow: hidden; position: relative; }
.hero-visual::before { content: ""; width: 500px; height: 500px; position: absolute; border-radius: 50%; background: var(--violet); filter: blur(120px); opacity: .34; top: -100px; right: -100px; }
.book-scene { width: min(80%, 600px); aspect-ratio: 1; position: relative; perspective: 1200px; }
.demo-book { position: absolute; width: 54%; height: 76%; left: 22%; top: 11%; background: #f4e7c9; box-shadow: -30px 30px 70px rgba(0,0,0,.45); transform: rotateY(-18deg) rotateX(7deg) rotateZ(-4deg); transform-style: preserve-3d; padding: 10%; overflow: hidden; }
.demo-book::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(0,0,0,.1); pointer-events: none; }
.demo-book::after { content: ""; position: absolute; width: 20px; height: 100%; right: -20px; top: 10px; background: #c7b17d; transform: skewY(45deg); transform-origin: left; }
.demo-book small { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; color: #5e513a; }
.demo-book h2 { font: 600 clamp(33px,4vw,58px)/.92 "Fraunces"; letter-spacing: -.05em; margin: 25% 0 8%; }
.demo-book p { font-size: 14px; line-height: 1.45; color: #5b503f; }
.float-chip { position: absolute; padding: 12px 15px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.1); color: #fff; backdrop-filter: blur(14px); border-radius: 14px; font-size: 13px; box-shadow: 0 18px 35px rgba(0,0,0,.22); }
.float-chip.a { left: 2%; top: 25%; }.float-chip.b { right: 0; bottom: 22%; }.float-chip.c { left: 10%; bottom: 7%; color: var(--lime); }

.dashboard { min-height: 100vh; background: #f2f0ea; }
.dash-topbar { height: 70px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 20; }
.dash-topbar .brand-mark { background: transparent url('/librete-logo.png?v=20260821') center / 185% auto no-repeat; color: transparent; }
.dash-topbar .top-actions { display: flex; gap: 10px; align-items: center; }
.account-label { color: #bfc1ba; font-size: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #f1c7b2; color: #5b2f1c; display: grid; place-items: center; font-weight: 700; }
.dashboard-main { width: min(1220px, 92vw); margin: 0 auto; padding: 58px 0 80px; }
.dash-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 34px; }
.dash-heading h1 { font: 600 clamp(38px,5vw,62px)/1 "Fraunces"; letter-spacing: -.05em; margin: 0 0 10px; }
.dash-heading p { margin: 0; color: var(--muted); }
.library-heading { padding: 34px 38px; background: linear-gradient(120deg,#fff 0%,#f0edff 100%); border: 1px solid var(--line); border-radius: 22px; align-items: center; }.library-heading > div { max-width: 760px; }.library-create { flex: 0 0 auto; min-height: 48px; padding: 0 22px; }
.quick-start { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 44px; }
.quick-card { min-height: 155px; border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 22px; text-align: left; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.quick-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(30,32,28,.08); }
.quick-card.featured { background: var(--violet); color: #fff; border-color: var(--violet); }
.quick-card .q-icon { font-size: 26px; margin-bottom: 24px; display: block; }
.quick-card strong { font-size: 17px; display: block; margin-bottom: 5px; }
.quick-card small { color: var(--muted); line-height: 1.4; display: block; }
.quick-card.featured small { color: rgba(255,255,255,.7); }
.quick-card.featured::after { content: "+"; position: absolute; right: 18px; top: -16px; font: 500 100px "Fraunces"; color: rgba(255,255,255,.13); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; }
.section-heading h2 { font: 600 26px "Fraunces"; margin: 0; }
.project-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.project-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.project-preview { aspect-ratio: 1.32; padding: 22px; position: relative; display: grid; place-items: center; overflow: hidden; }
.mini-cover { width: 42%; height: 88%; box-shadow: 0 12px 25px rgba(0,0,0,.22); padding: 13px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
.mini-cover strong { font: 600 18px/1 "Fraunces"; }.mini-cover small { font-size: 7px; text-transform: uppercase; letter-spacing: .12em; }
.real-cover-thumb { width:178px; height:252px; display:block; position:relative; overflow:hidden; box-shadow:0 18px 34px rgba(20,28,49,.28); background:#fff; }
.real-cover-thumb .folio-page { width:794px; height:1123px; position:absolute; inset:0; transform:scale(.224); transform-origin:top left; overflow:hidden; text-align:left; }
.real-cover-thumb .export-element { position:absolute; transform-origin:center; overflow:hidden; }.real-cover-thumb .export-text { white-space:pre-wrap; }.real-cover-thumb .export-image { display:block; }.real-cover-thumb .export-quote { margin:0; border-left:6px solid; padding:18px 20px; background:rgba(127,127,127,.08); font-size:24px; line-height:1.3; }.real-cover-thumb .page-num { display:none; }
.project-info { padding: 18px 20px 20px; }
.project-info-row { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.project-info h3 { margin: 0 0 6px; font-size: 16px; }
.project-info p { margin: 0; color: var(--muted); font-size: 12px; }
.more-btn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: 20px; }
.more-btn:hover { background: #f0eee8; }
.empty-projects { grid-column: 1/-1; border: 1px dashed #bbb8ae; border-radius: 20px; padding: 60px 24px; text-align: center; color: var(--muted); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(16,17,15,.68); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 20px; }
.modal { width: min(780px, 96vw); max-height: 90vh; overflow: auto; background: #faf9f5; border-radius: 22px; box-shadow: 0 30px 100px rgba(0,0,0,.35); }
.modal-head { padding: 24px 26px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { font: 600 30px "Fraunces"; margin: 0; }.modal-body { padding: 26px; }.modal-foot { padding: 18px 26px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.close-btn { border: 0; background: #ebe9e3; border-radius: 50%; width: 36px; height: 36px; }
.field { display: grid; gap: 7px; margin-bottom: 18px; }.field label { font-size: 13px; font-weight: 700; }.field input,.field textarea,.field select { width: 100%; border: 1px solid #cbc9c0; border-radius: 11px; background: #fff; padding: 12px 13px; color: var(--ink); }.field textarea { min-height: 160px; resize: vertical; }
.template-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.template-choice { border: 2px solid transparent; background: #fff; border-radius: 14px; padding: 10px; text-align: left; }
.template-choice.selected { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(111,97,255,.12); }
.template-swatch { height: 100px; border-radius: 9px; margin-bottom: 10px; display: grid; place-items: center; font: 600 18px "Fraunces"; }
.import-modal { width: min(610px, 96vw); }
.import-drop { width: 100%; min-height: 150px; border: 2px dashed #aaa89f; border-radius: 16px; background: #fff; display: grid; place-items: center; gap: 8px; color: var(--ink); }
.import-drop:hover { border-color: var(--violet); background: #f7f5ff; }.import-drop b { font: 600 21px "Fraunces"; }.import-drop span { color: var(--muted); font-size: 13px; }
.import-support { display: grid; gap: 9px; padding: 18px 0 4px; color: #55584f; font-size: 13px; }.import-support strong { color: var(--ink); }.import-support span { display: block; }.import-support b { color: var(--violet); }.import-support small { color: var(--muted); padding-top: 5px; line-height: 1.45; }
.import-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 18px 0; }.import-divider::before,.import-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.version-list { display: grid; gap: 8px; }.version-row { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 11px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; text-align: left; }.version-row:hover { border-color: var(--violet); background: #f7f5ff; }.version-row span:first-child { display: grid; gap: 3px; }.version-row small { color: var(--muted); }
.font-note { color: var(--muted); font-size: 11px; line-height: 1.35; }

.workflow-page { min-height: 100vh; background: #f3f1eb; }
.workflow-top { height: 72px; padding: 0 30px; background: #fff; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 180px 1fr 180px; align-items: center; position: sticky; top: 0; z-index: 30; }
.workflow-brand { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 10px; padding: 0; font-size: 20px; font-weight: 700; justify-self: start; }
.workflow-top > .btn { justify-self: end; }
.workflow-steps { display: flex; justify-content: center; gap: 0; }
.workflow-steps span { color: #9a9c94; min-width: 122px; display: flex; align-items: center; gap: 8px; font-size: 12px; position: relative; }
.workflow-steps span:not(:last-child)::after { content: ""; height: 1px; background: #d9d8d1; flex: 1; margin-right: 10px; }
.workflow-steps b { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%; border: 1px solid #c8c7c0; display: grid; place-items: center; font-size: 11px; }
.workflow-steps .active { color: var(--ink); font-weight: 700; }.workflow-steps .active b { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.workflow-steps .done { color: #55704c; }.workflow-steps .done b { background: #e8f2dc; border-color: #bdcfa5; }
.create-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 72px 0 90px; }
.create-heading { max-width: 720px; margin-bottom: 38px; }.create-heading h1,.template-heading h1 { font: 600 clamp(42px,5vw,68px)/.95 "Fraunces"; letter-spacing: -.045em; margin: 0 0 17px; }.create-heading > p:last-child,.template-heading > div > p:last-child { font-size: 17px; line-height: 1.55; color: var(--muted); }
.source-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 17px; }
.source-card { min-height: 260px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 18px; box-shadow: 0 3px 0 rgba(0,0,0,.02); transition: transform .2s, box-shadow .2s, border-color .2s; }
.source-card:hover { transform: translateY(-3px); box-shadow: 0 18px 45px rgba(29,31,27,.1); border-color: #b9b6ac; }.source-card.featured { background: var(--ink); color: #fff; border-color: var(--ink); }.source-card.featured p { color: #bfc1ba; }.source-card.featured .btn { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.source-icon { width: 50px; height: 50px; border-radius: 14px; background: #eeece6; display: grid; place-items: center; font: 600 24px "Fraunces"; }.featured .source-icon { background: var(--lime); color: var(--ink); }
.source-card small { letter-spacing: .15em; font-size: 10px; font-weight: 800; color: var(--violet); }.featured small { color: var(--lime); }.source-card h2 { font: 600 28px/1.1 "Fraunces"; margin: 8px 0 10px; }.source-card p { color: var(--muted); line-height: 1.5; margin: 0; }.source-card .btn { grid-column: 2; justify-self: start; }
.source-note { margin-top: 22px; border: 1px dashed #c8c6bd; border-radius: 12px; padding: 14px 18px; color: var(--muted); display: flex; gap: 16px; font-size: 13px; }.source-note strong { color: var(--ink); }
.trim-start { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:32px; padding:24px 26px; margin:0 0 22px; border:1px solid #dcdfea; border-left:4px solid var(--violet); background:#fff; }.trim-start>div { display:flex; gap:16px; align-items:flex-start; }.trim-start small { color:var(--violet); font-size:10px; font-weight:800; letter-spacing:.12em; }.trim-start h2 { margin:4px 0 5px; font-size:18px; }.trim-start p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }.trim-start label { display:grid; gap:7px; font-size:11px; font-weight:750; color:#4e5870; }.trim-start select { width:100%; border:1px solid #cdd3df; background:#fff; padding:11px 12px; border-radius:5px; color:var(--ink); }
.chapter-order-note { margin:4px 0 18px; padding:14px 16px; border-left:3px solid var(--violet); background:#f3f2ff; }.chapter-order-note p { margin:5px 0 0; color:#59647c; font-size:12px; line-height:1.55; }
.wordgenie-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }.wordgenie-form .full { grid-column: 1/-1; }
.helper-copy { color: var(--muted); line-height: 1.5; font-size: 13px; }.url-status { min-height: 24px; color: var(--violet); font-size: 13px; font-weight: 600; }

.draft-layout { height: calc(100vh - 72px); display: grid; grid-template-columns: 240px minmax(500px, 820px) 260px; justify-content: center; gap: 0; padding: 32px 24px; }
.draft-outline,.draft-check { padding: 24px 20px; min-height: 0; overflow: auto; }.draft-outline h2 { font: 600 27px "Fraunces"; margin: -8px 0 20px; }
.outline-list { display: grid; gap: 5px; margin-bottom: 18px; }.outline-list button { border: 0; border-radius: 9px; background: transparent; padding: 9px; display: grid; grid-template-columns: 28px 1fr; gap: 8px; text-align: left; color: #5d6059; }.outline-list button:hover { background: #e8e6df; color: var(--ink); }.outline-list b { font-size: 10px; color: var(--violet); }.outline-list span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }.btn.subtle { background: transparent; border-style: dashed; width: 100%; color: var(--muted); }
.draft-editor { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 55px rgba(29,31,27,.1); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; }.draft-editor.has-imported-images { grid-template-rows:auto auto minmax(0,1fr) auto; }
.draft-editor > header { padding: 22px 24px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 14px; }.draft-metadata { display:grid;grid-template-columns:auto minmax(220px,1fr) minmax(150px,.55fr);align-items:end;gap:13px;}.draft-metadata label { display:grid;gap:3px;min-width:0;}.draft-metadata label small { color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}.source-pill { align-self:center;background: #efedff; color: var(--violet); border-radius: 999px; padding: 6px 9px; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; font-weight: 800; white-space: nowrap; }.draft-editor #draft-title,.draft-editor #draft-author { border: 0; border-bottom: 1px solid transparent; min-width: 0; width: 100%; color: var(--ink); padding: 4px 0; }.draft-editor #draft-title { font: 600 25px "Fraunces";}.draft-editor #draft-author { font:600 14px "Inter";}.draft-editor #draft-title:hover,.draft-editor #draft-title:focus,.draft-editor #draft-author:hover,.draft-editor #draft-author:focus { border-color: var(--line); outline: 0; }
.draft-imported-images { display:grid;grid-template-columns:minmax(150px,.7fr) 1.3fr;gap:16px;align-items:center;padding:12px 20px;background:#f5f4ff;border-bottom:1px solid #dfdcff;}.draft-imported-images>div:first-child { display:grid;gap:4px;}.draft-imported-images strong { font-size:12px;color:#37315f;}.draft-imported-images span { color:#6f698c;font-size:10px;line-height:1.4;}.draft-image-strip { display:flex;gap:8px;overflow-x:auto;}.draft-image-strip figure { flex:0 0 78px;margin:0;}.draft-image-strip img { display:block;width:78px;height:52px;object-fit:cover;border:1px solid #d8d4ef;background:#fff;}.draft-image-strip figcaption { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#69647d;font-size:8px;margin-top:3px;}
.draft-blog-summary { display:grid;gap:4px;padding:12px 20px;border-bottom:1px solid #d9e1d1;background:#f4f8ef;}.draft-blog-summary strong { color:#35452d;font-size:12px;}.draft-blog-summary span { color:#66745f;font-size:10px;line-height:1.5;}
.draft-tools { display: flex; gap: 7px; flex-wrap: wrap; }.draft-tools button { border: 1px solid var(--line); background: #faf9f6; border-radius: 8px; padding: 7px 10px; font-size: 11px; color: #55584f; }.draft-tools button:hover { border-color: var(--violet); color: var(--violet); }
#draft-content { resize: none; border: 0; outline: 0; padding: 36px clamp(28px,7vw,72px); font: 400 17px/1.75 "Libre Baskerville",serif; color: #282a26; min-height: 0; width: 100%; }
.draft-editor > footer { border-top: 1px solid var(--line); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }.draft-editor > footer b { color: var(--ink); }
.draft-check h3 { font: 600 23px "Fraunces"; margin: -6px 0 18px; }.draft-check ul { list-style: none; padding: 0; display: grid; gap: 11px; font-size: 13px; }.draft-check li::before { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; margin-right: 8px; font-size: 10px; }.draft-check li.ok::before { content: "✓"; background: #e5efd8; color: #4f6c3d; }.draft-check li.warn::before { content: "!"; background: #fff0ca; color: #8c6614; }.draft-tip { margin-top: 28px; padding: 16px; border-radius: 13px; background: #e9e6ff; color: #4f4877; font-size: 12px; line-height: 1.5; }.draft-tip p { margin: 7px 0 0; }

.template-shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 54px 0 90px; }.template-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 32px; }.template-heading > div:first-child { max-width: 690px; }.template-filters { display: flex; gap: 7px; flex-wrap: wrap; }.template-filters button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 13px; font-size: 12px; }.template-filters button.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.catalogue-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }.catalogue-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 13px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; transition: transform .2s, box-shadow .2s; }.catalogue-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }.catalogue-preview { height: 245px; border-radius: 12px; padding: 24px; display: flex; justify-content: center; gap: 12px; overflow: hidden; }.catalogue-preview > div { width: 42%; height: 100%; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 9px 18px rgba(0,0,0,.2); }.catalogue-preview > div strong { font-size: 20px; line-height: 1; }.catalogue-preview > div i { width: 34%; height: 5px; }.catalogue-preview > span { width: 42%; height: 100%; padding: 18px 13px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 9px 18px rgba(0,0,0,.12); }.catalogue-preview > span b { font-size: 28px; }.catalogue-preview > span i { height: 4px; background: currentColor; opacity: .17; }.catalogue-card > div:nth-child(2) small { color: var(--violet); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; font-weight: 800; }.catalogue-card h2 { font: 600 23px "Fraunces"; margin: 5px 0; }.catalogue-card p { margin: 0; color: var(--muted); font-size: 12px; }
.panel-label { margin: 20px 0 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .11em; font-size: 10px; font-weight: 800; }.stock-note { display: block; margin-top: 10px; }.book-style-controls { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 2px; display: grid; gap: 10px; }.book-style-controls label { display: grid; gap: 5px; font-size: 11px; color: var(--muted); }.book-style-controls select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; }.book-style-controls .check-row { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.format-summary { margin-bottom:16px; padding:14px; border:1px solid #dfe2eb; background:#f7f8fb; display:grid; gap:4px; }.format-summary small { color:var(--violet); font-size:9px; font-weight:800; letter-spacing:.1em; }.format-summary strong { font-size:14px; }.format-summary span { color:var(--muted); font-size:10px; line-height:1.45; }.legal-fields { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0; }.legal-fields summary { cursor:pointer; font-size:12px; font-weight:750; padding:5px 0; }.legal-fields[open] { display:grid; gap:9px; }.legal-fields label { display:grid; gap:4px; font-size:10px; color:var(--muted); }.legal-fields input { width:100%; border:1px solid #d5d9e2; border-radius:4px; padding:7px; font-size:11px; }

.studio { height: 100vh; overflow: hidden; display: grid; grid-template-rows: 58px 54px 1fr; background: #d7d6d1; }
.studio-top { background: var(--ink); color: #fff; display: grid; grid-template-columns: 280px 1fr 280px; align-items: center; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.1); z-index: 30; }
.studio-top-left,.studio-top-right { display: flex; align-items: center; gap: 9px; }.studio-top-right { justify-content: flex-end; }
.back-btn { width: 34px; height: 34px; border: 0; background: rgba(255,255,255,.08); color: #fff; border-radius: 9px; }
.doc-title { color: #fff; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 6px 8px; font-weight: 600; min-width: 180px; }.doc-title:hover,.doc-title:focus { border-color: var(--white-line); background: rgba(255,255,255,.05); }
.save-state { justify-self: center; display: flex; align-items: center; gap: 8px; color: #b5b8af; font-size: 12px; }.save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.dark-btn { border: 1px solid var(--white-line); border-radius: 9px; color: #fff; background: rgba(255,255,255,.06); min-height: 34px; padding: 0 11px; font-size: 12px; display: inline-flex; align-items: center; gap: 7px; }
.dark-btn.accent { background: var(--lime); color: var(--ink); border-color: var(--lime); font-weight: 700; }
.formatbar { background: #f8f7f3; border-bottom: 1px solid #c9c8c2; display: flex; align-items: center; padding: 0 12px; gap: 5px; overflow-x: auto; z-index: 25; }
.tool-btn { min-width: 34px; height: 34px; border: 1px solid transparent; background: transparent; border-radius: 8px; display: grid; place-items: center; color: #363832; }
.tool-btn:hover,.tool-btn.active { background: #e7e5df; border-color: #d5d3cc; }.tool-btn:disabled { opacity: .35; cursor: not-allowed; }
.tool-sep { height: 24px; width: 1px; background: #d5d3cc; margin: 0 5px; }
.tool-select { height: 34px; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 0 8px; color: var(--ink); }
.tool-select:hover { background: #ebe9e3; }
.color-tool { width: 26px; height: 26px; padding: 0; border: 0; background: transparent; overflow: hidden; border-radius: 7px; }

.studio-body { min-height: 0; display: grid; grid-template-columns: 76px 236px 1fr 286px; }
.rail { background: #20211f; color: #bdbfb8; border-right: 1px solid #343531; padding: 10px 7px; display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 20; }
.rail-btn { width: 60px; min-height: 55px; border: 0; border-radius: 10px; color: #bdbfb8; background: transparent; display: grid; place-items: center; gap: 2px; font-size: 10px; padding: 5px; }
.rail-btn span:first-child { font-size: 20px; }.rail-btn:hover,.rail-btn.active { color: #fff; background: #333430; }.rail-btn.active { box-shadow: inset 3px 0 var(--lime); }
.rail-spacer { flex: 1; }
.left-panel,.right-panel { min-height: 0; overflow: auto; background: #f6f5f1; border-right: 1px solid #c8c7c1; }
.right-panel { border-right: 0; border-left: 1px solid #c8c7c1; }
.panel-head { position: sticky; top: 0; z-index: 5; background: #f6f5f1; padding: 16px; border-bottom: 1px solid #deddd7; display: flex; justify-content: space-between; align-items: center; }
.panel-close { display: none; }
.panel-head h2 { margin: 0; font-size: 14px; }.panel-body { padding: 14px; }
.thumb-list { display: grid; gap: 15px; }
.page-thumb-wrap { display: grid; grid-template-columns: 38px 1fr; align-items: start; gap: 7px; }
.page-number { font-size: 10px; color: var(--muted); padding-top: 3px; text-align: right; text-transform: uppercase; letter-spacing: .02em; }
.page-thumb { width: 100%; aspect-ratio: 794/1123; background: white; border: 2px solid transparent; box-shadow: 0 3px 10px rgba(0,0,0,.12); position: relative; overflow: hidden; padding: 10px; }
.page-thumb.selected { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(111,97,255,.14); }
.thumb-content { width: 100%; height: 100%; position: relative; overflow: hidden; font-size: 4px; }
.thumb-el { position: absolute; overflow: hidden; }.thumb-el.text { line-height: 1.2; }.thumb-el.image { background-size: cover; background-position: center; }.thumb-el.shape { border-radius: 2px; }
.page-add { width: 100%; min-height: 42px; border: 1px dashed #aaa89f; background: transparent; border-radius: 10px; color: var(--muted); }

.canvas-shell { min-width: 0; min-height: 0; overflow: auto; background: #c9c9c5; background-image: radial-gradient(#aaa 1px, transparent 1px); background-size: 18px 18px; position: relative; }
.canvas-scroll { min-width: 900px; min-height: 100%; padding: 52px 70px 120px; display: flex; justify-content: center; align-items: flex-start; }
.page-stage { position: relative; width: 794px; height: 1123px; transform-origin: top center; }
.page-canvas { width: 794px; height: 1123px; position: relative; background: var(--page-bg,#fffefa); box-shadow: 0 18px 46px rgba(0,0,0,.23); overflow: hidden; color: var(--page-text,#1c1c1a); }
.page-canvas .running-head { position:absolute; top:39px; max-width:44%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 10px/1.2 Arial,sans-serif; letter-spacing:.09em; text-transform:uppercase; opacity:.58; z-index:89; pointer-events:none; }
.page-canvas .running-head.odd { right:42px; text-align:right; }
.page-canvas .running-head.even { left:42px; text-align:left; }
.page-canvas .editor-page-num { position:absolute; right:38px; bottom:24px; z-index:89; font-size:12px; pointer-events:none; }
.page-canvas .running-foot { position:absolute; bottom:24px; max-width:44%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 11px/1.2 Arial,sans-serif; opacity:.68; z-index:89; pointer-events:none; }
.page-canvas .running-foot.odd { right:42px; text-align:right; }.page-canvas .running-foot.even { left:42px; text-align:left; }
.editable-margin-guide { position:absolute; border:1px dashed rgba(92,76,255,.42); box-shadow:0 0 0 1px rgba(255,255,255,.55); pointer-events:none; z-index:94; }
.page-ruler { position:absolute; z-index:96; pointer-events:none; color:#667085; }
.ruler-horizontal { left:0; right:0; top:0; height:18px; background-color:rgba(246,248,252,.9); background-image:repeating-linear-gradient(90deg,transparent 0 7px,#788198 7px 8px); border-bottom:1px solid #aab1c1; opacity:.72; }
.ruler-vertical { top:0; bottom:0; left:0; width:18px; background-color:rgba(246,248,252,.9); background-image:repeating-linear-gradient(0deg,transparent 0 7px,#788198 7px 8px); border-right:1px solid #aab1c1; opacity:.72; }
.smart-guide { position:absolute; z-index:110; pointer-events:none; background:#ff3d8d; box-shadow:0 0 0 1px rgba(255,255,255,.75); }
.smart-guide-x { top:0; bottom:0; width:1px; }.smart-guide-y { left:0; right:0; height:1px; }
.licensed-search { margin-top:18px; border-top:1px solid #e1e4ec; padding-top:14px; }.licensed-search form { display:grid; grid-template-columns:1fr auto; gap:8px; }.licensed-search form input { grid-column:1/-1; }.licensed-search form input,.licensed-search form select { min-width:0; border:1px solid #ccd2df; border-radius:6px; padding:9px; background:white; }.licensed-image-grid { display:grid; gap:10px; margin-top:14px; }.licensed-image-card { display:grid; grid-template-columns:78px 1fr; gap:10px; align-items:center; border:1px solid #e0e4ed; background:#fff; border-radius:8px; padding:7px; }.licensed-image-preview { width:78px; height:66px; border:0; padding:0; background:#eef0f4; overflow:hidden; cursor:pointer; }.licensed-image-preview img { width:100%; height:100%; object-fit:cover; }.licensed-image-card div { min-width:0; display:grid; gap:3px; }.licensed-image-card strong,.licensed-image-card span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }.licensed-image-card small { color:#5f36d9; font-weight:700; font-size:9px; text-transform:uppercase; }.image-search-empty,.image-search-status { margin-top:12px; padding:18px 12px; border:1px dashed #cbd1dd; border-radius:8px; text-align:center; display:grid; gap:5px; font-size:11px; color:#697386; }.image-search-empty strong { color:#20263a; }.image-search-status.error { color:#a62a3c; border-color:#e7b8bf; }.license-card { margin-top:14px; padding:12px; display:grid; gap:5px; background:#f0f5ff; border:1px solid #cfdcff; border-radius:8px; font-size:11px; }.license-card small { letter-spacing:.1em; color:#304ac2; font-weight:800; }.license-card div { display:flex; flex-wrap:wrap; gap:8px; }.license-card a { color:#273ba6; font-weight:700; }.guide-switches { display:grid; gap:7px; margin-top:12px; font-size:12px; }.guide-switches label { display:flex; gap:8px; align-items:center; }.furniture-controls { display:grid; gap:9px; }.furniture-controls label { display:grid; gap:5px; font-size:11px; }.furniture-controls .check-row { display:flex; align-items:center; }.furniture-controls input,.furniture-controls select { width:100%; border:1px solid #ccd2df; border-radius:5px; padding:7px; background:white; }.furniture-pair { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.launch-kit-modal { width:min(1040px,96vw); }.launch-kit-modal .modal-head > div { display:grid; gap:4px; }.launch-kit-modal .modal-head .eyebrow { margin:0; }.launch-summary { display:grid; grid-template-columns:1fr auto; gap:6px 18px; padding:18px; background:#171b2e; color:white; border-radius:9px; align-items:center; }.launch-summary strong { font:600 22px Fraunces; }.launch-summary span { color:#cbd2e4; font-size:12px; }.launch-summary .btn { grid-column:2; grid-row:1/3; }.launch-tabs { display:flex; gap:6px; overflow:auto; padding:18px 0 10px; }.launch-tabs button { border:1px solid #d9deea; background:white; padding:9px 12px; border-radius:6px; white-space:nowrap; cursor:pointer; font-weight:700; color:#495066; }.launch-tabs button.active { background:#5146e5; border-color:#5146e5; color:white; }.launch-section { display:none; }.launch-section.active { display:block; }.launch-section > div { display:flex; justify-content:space-between; align-items:center; }.launch-section h3 { margin:10px 0; font-size:18px; }.launch-section textarea { width:100%; height:320px; resize:vertical; border:1px solid #d7dce8; border-radius:8px; padding:18px; background:#fff; color:#22293d; font:14px/1.55 Inter,sans-serif; }.launch-note { font-size:11px; color:#6f778b; margin-bottom:0; }
.collab-invites { display:grid; gap:10px; margin-bottom:22px; }.collab-invite { display:flex; justify-content:space-between; gap:18px; align-items:center; background:#eef1ff; border:1px solid #cdd4ff; border-radius:9px; padding:16px 18px; }.collab-invite > div:first-child { display:grid; gap:4px; }.collab-invite small,.collab-intro small { color:#4f46d7; letter-spacing:.09em; font-weight:800; }.collab-invite span { color:#5f6678; font-size:12px; }.collab-invite > div:last-child { display:flex; gap:8px; }.shared-library { margin-top:38px; }.project-preview { position:relative; }.shared-badge { position:absolute; top:10px; right:10px; background:#171b2e; color:#fff; border-radius:20px; padding:6px 9px; font-size:10px; font-weight:800; }.collaboration-panel { display:grid; gap:16px; }.collab-intro,.collab-role { display:grid; gap:5px; padding:14px; background:#eef1ff; border:1px solid #d5daff; border-radius:8px; }.collab-intro p,.collab-role span { margin:0; font-size:11px; color:#626a7d; }.collab-form,.comment-form { display:grid; gap:9px; }.collab-form label { display:grid; gap:5px; font-size:11px; }.collab-form input,.collab-form select,.comment-form textarea { width:100%; border:1px solid #ccd2df; background:white; border-radius:6px; padding:9px; }.collab-form small { color:#6b7280; font-size:10px; }.collab-block { display:grid; gap:10px; padding-top:14px; border-top:1px solid #e2e5ec; }.collab-block-head { display:flex; align-items:center; justify-content:space-between; }.collab-block-head .panel-label { margin:0; }.member-list,.comment-list,.revision-list { display:grid; gap:8px; }.member-list article,.revision-row { display:flex; justify-content:space-between; gap:8px; padding:9px; border:1px solid #e0e4ec; border-radius:7px; background:#fff; }.member-list article span,.revision-row span { display:grid; gap:3px; min-width:0; }.member-list strong,.revision-row strong { font-size:11px; overflow:hidden; text-overflow:ellipsis; }.member-list small,.revision-row small { font-size:9px; color:#6a7184; }.member-list article > button { border:0; background:transparent; cursor:pointer; }.comment-form textarea { min-height:80px; resize:vertical; }.comment-form label { display:flex; gap:6px; font-size:10px; color:#60687a; }.page-comment { padding:10px; border-left:3px solid #6558e8; background:#fff; border-radius:0 7px 7px 0; box-shadow:0 1px 5px rgba(30,40,70,.08); }.page-comment.resolved { opacity:.58; border-color:#7b879b; }.page-comment header { display:flex; justify-content:space-between; gap:8px; font-size:10px; }.page-comment p { font-size:11px; line-height:1.4; }.page-comment > span { display:block; font-size:9px; color:#6152da; margin-bottom:6px; }.panel-empty { color:#747b8c; font-size:10px; line-height:1.4; }.read-only-studio .drag-handle,.read-only-studio .resize-handle,.read-only-studio .rotate-handle { display:none!important; }.read-only-studio .formatbar,.read-only-studio .right-panel { pointer-events:none; opacity:.7; }
.canvas-element { position: absolute; min-width: 30px; min-height: 20px; user-select: none; border: 1px solid transparent; transform-origin: center; }
.canvas-element:hover { border-color: rgba(111,97,255,.35); }.canvas-element.selected { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); z-index: 90 !important; }
.canvas-element .editable { width: 100%; height: 100%; outline: 0; overflow: hidden; white-space: pre-wrap; user-select: text; cursor: text; }
.canvas-element .image-content { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.canvas-element .shape-content { width: 100%; height: 100%; background: currentColor; }
.canvas-element .quote-content { height: 100%; border-left: 6px solid currentColor; padding: 16px 20px; background: color-mix(in srgb, currentColor 8%, transparent); font-family: "Fraunces"; font-size: 24px; line-height: 1.3; }
.canvas-element .table-content { width: 100%; height: 100%; border-collapse: collapse; font-size: 14px; background: rgba(255,255,255,.7); }.table-content td,.table-content th { border: 1px solid currentColor; padding: 7px; }.table-content th { background: color-mix(in srgb, currentColor 12%, white); }
.canvas-element .toc-content { font-size: 14px; line-height: 1.9; }.toc-row { display: flex; gap: 8px; }.toc-row i { flex: 1; border-bottom: 1px dotted currentColor; transform: translateY(-6px); opacity: .35; }
.drag-handle { position: absolute; left: -25px; top: -1px; width: 20px; height: 24px; background: var(--violet); color: white; display: none; place-items: center; border-radius: 5px 0 0 5px; font-size: 12px; cursor: move; }.selected .drag-handle { display: grid; }
.resize-handle { position: absolute; width: 12px; height: 12px; right: -7px; bottom: -7px; border: 2px solid #fff; background: var(--violet); border-radius: 50%; display: none; cursor: nwse-resize; }.selected .resize-handle { display: block; }
.rotate-handle { position: absolute; width: 12px; height: 12px; left: calc(50% - 6px); top: -28px; background: var(--violet); border: 2px solid white; border-radius: 50%; display: none; cursor: grab; }.selected .rotate-handle { display: block; }
.zoom-control { position: fixed; bottom: 18px; right: 305px; z-index: 40; background: #fff; border: 1px solid #c8c7c1; box-shadow: 0 6px 18px rgba(0,0,0,.16); border-radius: 11px; display: flex; align-items: center; gap: 7px; padding: 6px; }.zoom-control button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; }.zoom-control button:hover { background: #eee; }.zoom-control span { min-width: 42px; text-align: center; font-size: 12px; }

.element-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.insert-card { min-height: 76px; border: 1px solid #d8d6cf; background: #fff; border-radius: 10px; display: grid; place-items: center; gap: 3px; padding: 8px; font-size: 11px; color: #55584f; }.insert-card b { font: 600 20px "Fraunces"; color: var(--ink); }.insert-card:hover { border-color: var(--violet); color: var(--violet); }
.asset-drop { min-height: 100px; border: 1px dashed #aaa89f; border-radius: 12px; display: grid; place-items: center; text-align: center; padding: 15px; color: var(--muted); font-size: 12px; background: #fff; }
.asset-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 12px; }.asset-item { aspect-ratio: 1; border: 0; border-radius: 9px; background-size: cover; background-position: center; }
.prop-section { padding: 15px; border-bottom: 1px solid #deddd7; }.prop-title { font-size: 11px; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); font-weight: 700; margin: 0 0 12px; }.prop-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.prop-row { display: grid; gap: 5px; }.prop-row.full { grid-column: 1/-1; }.prop-row label { font-size: 11px; color: var(--muted); }.prop-row input,.prop-row select,.prop-row textarea { width: 100%; min-width: 0; border: 1px solid #d3d1ca; border-radius: 8px; background: #fff; padding: 8px; font-size: 12px; }.prop-row input[type=color] { height: 36px; padding: 3px; }.prop-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.layers-list { display: grid; gap: 5px; }.layer-item { border: 1px solid transparent; background: #fff; border-radius: 8px; padding: 9px; display: flex; align-items: center; gap: 8px; font-size: 12px; }.layer-item.selected { border-color: var(--violet); background: #f1efff; }.layer-icon { width: 24px; height: 24px; display: grid; place-items: center; background: #efeee9; border-radius: 6px; }
.style-grid { display: grid; gap: 10px; }.style-card { border: 2px solid transparent; border-radius: 12px; background: #fff; padding: 10px; text-align: left; }.style-card.selected { border-color: var(--violet); }.style-preview { height: 76px; border-radius: 8px; padding: 12px; margin-bottom: 8px; overflow: hidden; }.style-preview strong { display: block; font-size: 15px; margin-bottom: 5px; }.style-preview i { display: block; height: 4px; margin: 5px 0; width: 80%; background: currentColor; opacity: .25; }

.assistant-panel { position: fixed; right: 18px; bottom: 18px; width: 360px; max-height: 560px; background: #191a18; color: #fff; z-index: 80; border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.38); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.assistant-head { padding: 16px; border-bottom: 1px solid var(--white-line); display: flex; justify-content: space-between; align-items: center; }.assistant-head strong { display: flex; gap: 8px; align-items: center; }.ai-spark { color: var(--lime); }
.assistant-messages { padding: 16px; overflow: auto; display: grid; gap: 12px; min-height: 220px; }.message { max-width: 88%; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }.message.ai { background: #2c2e2a; border-radius: 4px 12px 12px 12px; }.message.user { background: var(--violet); justify-self: end; border-radius: 12px 4px 12px 12px; }.ai-quick { display: flex; gap: 6px; flex-wrap: wrap; }.ai-quick button { border: 1px solid var(--white-line); background: transparent; color: #d9dbd5; border-radius: 999px; padding: 6px 9px; font-size: 11px; }
.assistant-input { border-top: 1px solid var(--white-line); padding: 12px; display: flex; gap: 8px; }.assistant-input input { flex: 1; min-width: 0; border: 1px solid var(--white-line); background: #242522; color: #fff; border-radius: 10px; padding: 10px; }.assistant-input button { width: 40px; border: 0; border-radius: 10px; background: var(--lime); color: var(--ink); }

.preview-overlay { position: fixed; inset: 0; z-index: 180; background: #2a2b28; display: grid; grid-template-rows: 64px 1fr; }
.preview-head { background: var(--ink); color: white; padding: 0 18px 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.preview-head > div { display: flex; align-items: center; gap: 13px; }.preview-head .eyebrow { margin: 0; color: var(--lime); }.preview-frame { width: 100%; height: 100%; border: 0; background: #c9c9c4; }
.export-dialog { width: min(920px,94vw); }.export-lead { color: var(--muted); margin-top: 0; }.export-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.export-options button { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 18px; text-align: left; min-height: 170px; display: flex; flex-direction: column; align-items: flex-start; }
.export-options button:hover { border-color: var(--violet); transform: translateY(-2px); }.export-options span { font-size: 11px; letter-spacing: .1em; color: var(--violet); font-weight: 700; }.export-options strong { font: 600 20px/1.1 "Fraunces"; margin: 30px 0 9px; }.export-options small { color: var(--muted); line-height: 1.45; }
.mockup-picker-overlay { z-index: 140; }.mockup-picker { width:min(1040px,95vw); background:#f8f8f5; }.mockup-picker-body { padding:22px; }.mockup-help { margin:0 0 18px; color:var(--muted); font-size:13px; }.mockup-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.mockup-choice { border:1px solid #d8dce5; border-radius:10px; padding:0; background:#fff; overflow:hidden; text-align:left; transition:transform .16s,border-color .16s,box-shadow .16s; }.mockup-choice:hover { transform:translateY(-2px); border-color:var(--violet); box-shadow:0 14px 34px rgba(25,35,70,.12); }.mockup-choice img { width:100%; aspect-ratio:4/3; display:block; object-fit:cover; }.mockup-choice span { display:grid; gap:5px; padding:14px; }.mockup-choice strong { font:600 19px "Fraunces"; }.mockup-choice small { color:var(--muted); line-height:1.4; }.mockup-working { min-height:420px; display:grid; place-content:center; justify-items:center; text-align:center; gap:10px; color:var(--muted); }.mockup-working i { width:34px; height:34px; border:3px solid #d9dce8; border-top-color:var(--violet); border-radius:50%; animation:mockup-spin .8s linear infinite; }.mockup-working strong { color:var(--ink); font-size:18px; }.mockup-working.error .btn { margin-top:10px; }.mockup-result { display:grid; gap:16px; justify-items:center; }.mockup-result>img { width:auto; max-width:100%; max-height:68vh; object-fit:contain; background:#fff; border-radius:8px; box-shadow:0 18px 50px rgba(0,0,0,.22); }.mockup-result>div { width:100%; display:flex; justify-content:flex-end; gap:10px; }@keyframes mockup-spin{to{transform:rotate(360deg)}}

.toast-region { position: fixed; top: 78px; right: 18px; z-index: 200; display: grid; gap: 8px; }.toast { background: #191a18; color: #fff; border-radius: 11px; padding: 12px 15px; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: 13px; animation: toast-in .25s ease; }.toast.success { border-left: 4px solid var(--lime); }.toast.error { border-left: 4px solid var(--coral); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 1100px) {
  .project-grid { grid-template-columns: repeat(2,1fr); }.quick-start { grid-template-columns: repeat(2,1fr); }.studio-body { grid-template-columns: 70px 210px 1fr; }.right-panel { display: none; }.studio-top { grid-template-columns: 240px 1fr 240px; }.zoom-control { right: 18px; }.draft-layout { grid-template-columns: 200px minmax(480px,1fr); }.draft-check { display: none; }.catalogue-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }.hero-copy { padding: 70px 7vw; }.hero-visual { min-height: 560px; }.quick-start,.project-grid { grid-template-columns: 1fr; }.dash-heading { align-items: start; flex-direction: column; }.template-picker { grid-template-columns: 1fr; }.studio { grid-template-rows: 54px 50px 1fr; }.studio-top { grid-template-columns: 1fr auto; }.save-state { display: none; }.studio-top-right .dark-btn:not(.accent) { display: none; }.studio-body { grid-template-columns: 62px 1fr; }.left-panel { position: fixed; left: 62px; top: 104px; bottom: 0; width: 230px; z-index: 50; box-shadow: 10px 0 30px rgba(0,0,0,.2); }.left-panel.mobile-hidden { display: none; }.panel-close { display: inline-flex; }.canvas-scroll { min-width: 0; padding: 30px 10px 100px; justify-content: flex-start; }.page-stage { transform-origin: top left; }.assistant-panel { width: calc(100vw - 28px); right: 14px; }.hero-proof { gap: 18px; }.export-options { grid-template-columns: 1fr; }.preview-head .eyebrow { display: none; }.workflow-top { height: 62px; grid-template-columns: 1fr auto; padding: 0 14px; }.workflow-steps { display: none; }.workflow-top > .btn { min-height: 34px; }.create-shell,.template-shell { width: min(100% - 28px,1240px); padding-top: 40px; }.source-grid,.catalogue-grid { grid-template-columns: 1fr; }.source-card { min-height: 220px; padding: 20px; }.source-note { flex-direction: column; gap: 6px; }.draft-layout { height: calc(100vh - 62px); display: block; padding: 12px; }.draft-outline { display: none; }.draft-editor { height: 100%; }.draft-editor > header { padding: 14px; }.draft-tools { overflow-x: auto; flex-wrap: nowrap; }.draft-tools button { white-space: nowrap; }#draft-content { padding: 24px 20px; }.draft-editor > footer span { display: none; }.template-heading { align-items: start; flex-direction: column; }.wordgenie-form { grid-template-columns: 1fr; }.wordgenie-form .full { grid-column: auto; }
}
@media (max-width:760px){.mockup-grid{grid-template-columns:1fr}.mockup-result>div{flex-direction:column-reverse}.mockup-result .btn{width:100%}}

@media print {
  body { background: white; }.studio-top,.formatbar,.rail,.left-panel,.right-panel,.zoom-control,.assistant-panel,.toast-region { display: none !important; }.studio,.studio-body,.canvas-shell,.canvas-scroll { display: block; height: auto; overflow: visible; background: white; padding: 0; }.page-stage { transform: none !important; width: auto; height: auto; }.page-canvas { box-shadow: none; margin: 0; break-after: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }.canvas-element.selected { border-color: transparent; box-shadow: none; }.drag-handle,.resize-handle,.rotate-handle { display: none !important; }
  @page { size: A4; margin: 0; }
}

/* Folio 2.0 — sistema de producto editorial */
:root { --ink:#111b3e; --ink-2:#273257; --muted:#667085; --paper:#fff; --ground:#f4f6fa; --line:#dfe3ec; --lime:#eef0ff; --violet:#5146e5; --coral:#f1685b; --blue:#3b60e4; --shadow:0 24px 64px rgba(17,27,62,.13); --radius:10px; font-family:"Inter",sans-serif; }
html { scroll-behavior:smooth; }
body { color:var(--ink); background:#fff; }
a { color:inherit; text-decoration:none; }
.btn { border-radius:6px; min-height:42px; padding:0 18px; }
.btn.primary { background:var(--violet); border-color:var(--violet); box-shadow:0 8px 18px rgba(81,70,229,.18); }
.btn.primary:hover { background:#4035cf; border-color:#4035cf; }
.btn.secondary { border-color:#c9cfe0; background:#fff; }
.btn.light { background:#fff; border-color:#fff; color:var(--ink); }
.btn-large { min-height:52px; padding:0 24px; }
.brand { color:var(--ink); letter-spacing:-.035em; }
.brand-mark { width:32px; height:32px; border-radius:7px; background:transparent url('/librete-logo.png?v=20260821') center / 185% auto no-repeat; color:transparent; font:700 18px/1 "Inter"; }
.eyebrow { color:var(--violet); letter-spacing:.12em; font-size:11px; }

.landing { background:#fff; overflow:hidden; }
.marketing-header { height:76px; border-bottom:1px solid #e8ebf2; background:rgba(255,255,255,.96); position:sticky; top:0; z-index:100; }
.landing-nav { width:min(1200px,calc(100% - 48px)); height:100%; margin:0 auto; padding:0; border:0; background:transparent; backdrop-filter:none; position:static; }
.marketing-links { display:flex; align-items:center; gap:30px; }
.marketing-links a,.nav-login { color:#4b5675; font-size:14px; font-weight:500; }
.marketing-links a:hover,.nav-login:hover { color:var(--violet); }
.nav-actions { align-items:center; gap:18px; }
.marketing-shell { width:min(1200px,calc(100% - 48px)); margin:0 auto; }
.landing .hero { min-height:710px; grid-template-columns:.86fr 1.14fr; gap:50px; align-items:center; padding:72px 0 80px; }
.landing .hero-copy { padding:0; display:block; }
.landing .hero h1 { max-width:620px; margin:0 0 24px; font:700 clamp(46px,5.2vw,70px)/1.03 "Inter",sans-serif; letter-spacing:-.055em; color:var(--ink); }
.landing .hero h1 span { color:var(--violet); }
.landing .hero-lead { font-size:18px; line-height:1.65; color:#59647e; max-width:590px; margin-bottom:30px; }
.landing .hero-actions { align-items:center; gap:24px; }
.text-link { color:var(--ink); font-size:14px; font-weight:650; display:inline-flex; gap:9px; align-items:center; }
.text-link span { color:var(--violet); }
.hero-note { color:#8a93a8; font-size:11px; margin:18px 0 0; }
.product-shot { border:1px solid #d9deea; border-radius:11px; background:#fff; box-shadow:0 32px 80px rgba(31,40,81,.18); overflow:hidden; }
.shot-top { height:48px; border-bottom:1px solid #e1e5ee; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; padding:0 13px; font-size:9px; color:#69738c; }
.shot-logo { display:flex; align-items:center; gap:5px; font-weight:700; color:var(--ink); }
.shot-logo b { width:18px; height:18px; display:grid; place-items:center; background:transparent url('/librete-logo.png?v=20260821') center / 185% auto no-repeat; color:transparent; border-radius:4px; font-size:0; }
.shot-title { justify-self:center; }
.shot-publish { justify-self:end; padding:6px 10px; border-radius:4px; background:var(--violet); color:#fff; font-weight:700; }
.shot-toolbar { height:38px; border-bottom:1px solid #e1e5ee; display:flex; align-items:center; padding:0 11px 0 73px; gap:14px; color:#667085; font-size:9px; }
.shot-toolbar b { font-weight:600; color:#313b5b; border-left:1px solid #e1e5ee; padding-left:13px; }
.shot-body { height:410px; display:grid; grid-template-columns:60px 130px 1fr; }
.shot-rail { border-right:1px solid #e1e5ee; padding:14px 5px; display:grid; grid-template-columns:1fr; align-content:start; gap:4px; text-align:center; background:#fff; }
.shot-rail b { font-size:13px; margin-top:7px; color:#4a5574; }
.shot-rail span { font-size:7px; color:#7c859a; }
.shot-pages { border-right:1px solid #dce1ea; background:#f8f9fc; padding:16px; }
.shot-pages>small { display:block; font-size:7px; letter-spacing:.08em; color:#6f7890; margin-bottom:10px; }
.shot-thumb { width:82px; height:113px; margin:0 auto 13px; padding:11px; display:flex; flex-direction:column; box-shadow:0 3px 10px rgba(22,31,61,.15); border:2px solid transparent; }
.shot-thumb.cover { background:#17234d; color:white; border-color:var(--violet); }
.shot-thumb.cover span { font-size:5px; letter-spacing:.14em; color:#ff8d75; }
.shot-thumb.cover strong { margin-top:22px; font:600 14px/1.05 "Playfair Display"; }
.shot-thumb.page { background:white; color:#17234d; }
.shot-thumb.page strong { font-size:20px; color:var(--coral); }
.shot-thumb.page i { height:2px; width:100%; background:#ccd2df; margin-top:9px; }
.shot-canvas { background:#e9edf4; padding:25px 34px; display:flex; justify-content:center; overflow:hidden; }
.shot-paper { width:258px; height:365px; background:#fff; box-shadow:0 12px 32px rgba(20,30,65,.18); padding:38px 31px; color:#1b2549; }
.shot-paper small { font-size:6px; color:var(--coral); letter-spacing:.12em; font-weight:700; }
.shot-paper h2 { font:600 25px/1.06 "Playfair Display"; letter-spacing:-.03em; margin:24px 0 20px; }
.shot-paper p { font:8px/1.65 "Inter"; color:#52607c; }
.shot-paper blockquote { border-left:3px solid var(--coral); margin:25px 0 0; padding:8px 0 8px 11px; font:600 10px/1.4 "Playfair Display"; }
.source-band { border-top:1px solid #e8ebf2; border-bottom:1px solid #e8ebf2; padding:26px 24px; text-align:center; background:#fafbfe; }
.source-band p { color:#8992a7; text-transform:uppercase; letter-spacing:.13em; font-size:9px; font-weight:700; margin:0 0 17px; }
.source-band div { display:flex; justify-content:center; flex-wrap:wrap; gap:48px; color:#68728a; }
.source-band span { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; }
.source-band b { color:var(--violet); font-size:11px; }
.marketing-section { width:min(1140px,calc(100% - 48px)); margin:0 auto; padding:112px 0; }
.section-intro { max-width:660px; margin-bottom:54px; }
.section-intro.centered { text-align:center; margin-left:auto; margin-right:auto; }
.section-intro h2,.feature-copy h2,.contact-section h2 { margin:0 0 18px; font:700 clamp(34px,4vw,52px)/1.08 "Inter"; letter-spacing:-.045em; color:var(--ink); }
.section-intro>p:last-child,.feature-copy>p,.contact-section>div>p { color:#69738a; font-size:16px; line-height:1.7; }
.audiences { padding-bottom:90px; }
.audience-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #dfe3ec; }
.audience-grid article { padding:32px 26px; min-height:230px; border-right:1px solid #dfe3ec; }
.audience-grid article:last-child { border-right:0; }
.audience-grid span { color:var(--violet); font-size:11px; font-weight:700; }
.audience-grid h3 { margin:55px 0 12px; font-size:18px; letter-spacing:-.025em; }
.audience-grid p { margin:0; color:#737c91; font-size:13px; line-height:1.65; }
.workflow-marketing { width:100%; max-width:none; background:var(--ink); color:#fff; padding-left:max(24px,calc((100% - 1140px)/2)); padding-right:max(24px,calc((100% - 1140px)/2)); display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; }
.workflow-marketing .section-intro { position:sticky; top:125px; align-self:start; }
.workflow-marketing .eyebrow { color:#a9a3ff; }
.workflow-marketing .section-intro h2 { color:white; }
.workflow-marketing .section-intro p:last-child { color:#a9b1c7; }
.process-list { margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.16); }
.process-list li { display:grid; grid-template-columns:60px 1fr; gap:22px; padding:29px 0; border-bottom:1px solid rgba(255,255,255,.16); }
.process-list>li>b { color:#8881ff; font-size:11px; }
.process-list h3 { margin:0 0 8px; font-size:20px; }
.process-list p { margin:0; color:#aab2c6; font-size:13px; line-height:1.65; }
.feature-split { display:grid; grid-template-columns:.85fr 1.15fr; min-height:690px; background:#f5f7fb; }
.feature-copy { padding:105px max(40px,6vw) 90px max(30px,calc((100vw - 1140px)/2)); align-self:center; }
.feature-copy ul { list-style:none; padding:4px 0 20px; margin:0; display:grid; gap:13px; color:#4d5873; font-size:14px; }
.feature-copy li::before { content:"✓"; color:var(--violet); font-weight:800; margin-right:11px; }
.feature-visual { background:#eceffc; display:grid; place-items:center; padding:70px 5vw; }
.spread-preview { width:min(660px,100%); aspect-ratio:1.28; display:grid; grid-template-columns:1fr 1fr; filter:drop-shadow(0 30px 35px rgba(30,39,78,.2)); transform:rotate(-1.2deg); }
.spread-cover,.spread-page { padding:13%; display:flex; flex-direction:column; }
.spread-cover { background:#18244e; color:#fff; justify-content:space-between; }
.spread-cover small,.spread-page small { font-size:9px; letter-spacing:.14em; color:#ff8d75; font-weight:700; }
.spread-cover h3 { font:600 clamp(28px,3vw,43px)/1.02 "Playfair Display"; margin:0; }
.spread-cover span { font-size:8px; letter-spacing:.13em; }
.spread-page { background:#fff; color:#17214a; }
.spread-page h3 { font:600 clamp(26px,3vw,40px)/1.04 "Playfair Display"; margin:18% 0 9%; }
.spread-page p { font-size:10px; line-height:1.6; color:#59647d; }
.spread-lines i { display:block; height:2px; width:100%; background:#dce0e9; margin:8px 0; }
.spread-lines i:last-child { width:65%; }
.spread-page blockquote { margin:auto 0 0; border-left:3px solid var(--coral); padding-left:11px; font:600 13px/1.4 "Playfair Display"; }
.formats { padding-bottom:120px; }
.format-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.format-grid article { border:1px solid #dfe3ec; padding:26px 22px; min-height:210px; }
.format-grid b { color:var(--violet); font-size:12px; letter-spacing:.08em; }
.format-grid h3 { margin:64px 0 10px; font-size:16px; }
.format-grid p { margin:0; color:#768096; font-size:12px; line-height:1.6; }
.faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; padding-top:30px; }
.faq-list { border-top:1px solid #dfe3ec; }
.faq-list details { border-bottom:1px solid #dfe3ec; }
.faq-list summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:24px 0; font-size:16px; font-weight:650; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { color:var(--violet); }
.faq-list details[open] summary span { transform:rotate(45deg); }
.faq-list details p { color:#6a748b; line-height:1.7; font-size:14px; margin:-4px 45px 24px 0; }
.contact-section { width:min(1140px,calc(100% - 48px)); margin:45px auto 110px; padding:65px; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; background:#f5f7fb; border:1px solid #e0e4ed; }
.contact-section>div>a { color:var(--violet); font-weight:700; font-size:14px; }
.contact-form { background:#fff; border:1px solid #dfe3ec; padding:28px; display:grid; gap:16px; }
.contact-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form label { display:grid; gap:7px; color:#3d4865; font-size:12px; font-weight:650; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; border:1px solid #ccd2df; border-radius:5px; padding:11px 12px; background:#fff; color:var(--ink); }
.contact-form textarea { resize:vertical; }
.contact-form .btn { justify-self:start; }
.form-status { margin:0; font-size:12px; color:#69738b; }
.form-status.success { color:#176b48; }.form-status.error { color:#b42318; }
.final-cta { padding:100px 24px; background:var(--violet); color:white; text-align:center; }
.final-cta>div { max-width:830px; margin:0 auto; }
.final-cta .eyebrow { color:#d7d4ff; }
.final-cta h2 { font:700 clamp(38px,5vw,64px)/1.04 "Inter"; letter-spacing:-.05em; margin:0 auto 34px; }
.marketing-footer { background:#0d1634; color:#fff; padding:64px max(24px,calc((100% - 1140px)/2)) 22px; }
.footer-main { display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; padding-bottom:55px; }
.footer-main>div { display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.light-brand { color:white; }
.footer-main p { max-width:330px; color:#a7b0c6; font-size:13px; line-height:1.65; }
.footer-main h3 { margin:4px 0 8px; font-size:12px; color:#fff; }
.footer-main a:not(.brand) { color:#a7b0c6; font-size:12px; }
.footer-main a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.14); padding-top:20px; display:flex; justify-content:space-between; color:#77829e; font-size:10px; }

.access-page { min-height:100vh; background:#f4f6fa; }
.access-page>header { height:76px; padding:0 max(24px,calc((100% - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #e2e6ee; }
.access-page>header>a:last-child { color:#647089; font-size:13px; }
.access-shell { width:min(1080px,calc(100% - 48px)); min-height:calc(100vh - 76px); margin:0 auto; display:grid; grid-template-columns:1fr 440px; gap:100px; align-items:center; padding:70px 0; }
.access-copy h1,.onboarding-card h1 { margin:0 0 22px; font:700 clamp(38px,5vw,60px)/1.05 "Inter"; letter-spacing:-.05em; }
.access-copy>p:not(.eyebrow) { color:#68738b; font-size:16px; line-height:1.7; max-width:570px; }
.access-copy ul { list-style:none; padding:20px 0 0; display:grid; gap:13px; color:#47536e; font-size:14px; }
.access-copy li::before { content:"✓"; color:var(--violet); font-weight:800; margin-right:10px; }
.access-card { background:#fff; border:1px solid #dce1eb; box-shadow:0 24px 70px rgba(23,35,74,.12); padding:42px; }
.access-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:9px; background:transparent url('/librete-logo.png?v=20260821') center / 185% auto no-repeat; color:transparent; font-size:0; font-weight:800; }
.auth-provider { width:100%; min-height:48px; border:1px solid #c9c7c0; border-radius:10px; background:#fff; display:grid; grid-template-columns:24px 1fr 24px; align-items:center; padding:0 14px; font-weight:700; color:var(--ink); }
.auth-provider:disabled { opacity:.45; cursor:not-allowed; }.google-auth span:first-child { font-size:18px; color:#4285f4; }.auth-divider { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; margin:14px 0; }.auth-divider::before,.auth-divider::after { content:""; height:1px; background:var(--line); flex:1; }.magic-form { display:grid; gap:7px; }.magic-form label { font-size:12px; font-weight:700; }.magic-form > div { display:grid; grid-template-columns:1fr auto; }.magic-form input { min-width:0; border:1px solid #c9c7c0; border-radius:9px 0 0 9px; padding:11px; }.magic-form button { border:0; border-radius:0 9px 9px 0; background:var(--ink); color:#fff; padding:0 13px; font-weight:700; }.magic-form p { min-height:16px; margin:2px 0 0; color:var(--muted); font-size:11px; }
.isbn-tool { margin:16px 0; padding:15px; border:1px solid #d8d6cf; border-radius:12px; background:#fff; }.isbn-tool .panel-label { margin-top:0; }.isbn-tool strong { font:600 17px Fraunces; }.isbn-tool p:not(.panel-label) { color:var(--muted); font-size:11px; line-height:1.45; }.isbn-tool .btn { width:100%; }
.access-card h2 { margin:27px 0 12px; font-size:26px; letter-spacing:-.035em; }
.trial-access-note { display:grid; gap:5px; margin:15px 0; padding:14px 15px; border-left:3px solid var(--violet); background:#f1efff; }
.trial-access-note strong { color:#35269b; font-size:12px; }
.trial-access-note span { color:#626c82; font-size:10px; line-height:1.55; }
.access-card>p { color:#6a748b; font-size:13px; line-height:1.65; }
.chatgpt-button { min-height:54px; margin:28px 0 18px; padding:0 16px; background:var(--ink); color:#fff; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; font-size:13px; font-weight:650; }
.openai-mark { font-size:18px; }
.access-card .access-legal { font-size:10px; color:#8b93a5; }
.access-legal a,.access-switch a { color:var(--violet); text-decoration:underline; text-underline-offset:2px; }
.access-switch { border-top:1px solid #e5e8ef; margin-top:25px; padding-top:22px; text-align:center; font-size:12px; color:#6b758c; }
.legal-page { min-height:100vh; background:#fff; }
.legal-header { height:76px; border-bottom:1px solid #e4e7ee; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100% - 1160px)/2)); position:sticky; top:0; z-index:20; background:rgba(255,255,255,.97); }
.legal-header nav { display:flex; align-items:center; gap:22px; font-size:12px; color:#667188; }
.legal-layout { width:min(1120px,calc(100% - 48px)); margin:0 auto; display:grid; grid-template-columns:290px 1fr; gap:95px; padding:75px 0 110px; }
.legal-layout>aside { position:sticky; top:116px; align-self:start; }
.legal-layout>aside h1 { font-size:35px; letter-spacing:-.045em; margin:0 0 12px; }
.legal-layout>aside>p:not(.eyebrow) { color:#858da0; font-size:11px; }
.legal-layout>aside nav { border-top:1px solid #e1e5ec; margin-top:27px; padding-top:15px; display:grid; max-height:55vh; overflow:auto; }
.legal-layout>aside nav a { color:#68738a; font-size:10px; line-height:1.35; padding:7px 0; }
.legal-lead { font-size:20px; line-height:1.6; color:#4e5973; padding-bottom:35px; border-bottom:1px solid #e1e5ec; }
.legal-layout article section { padding:38px 0; border-bottom:1px solid #e6e9ef; scroll-margin-top:100px; }
.legal-layout article h2 { font-size:21px; letter-spacing:-.025em; margin:0 0 17px; }
.legal-layout article p,.legal-layout article li { color:#59647c; font-size:13px; line-height:1.85; }
.legal-layout article a { color:var(--violet); text-decoration:underline; }
.legal-layout article li { margin-bottom:7px; }
.legal-footer { border-top:1px solid #e1e5ec; padding:24px max(24px,calc((100% - 1120px)/2)); display:flex; gap:24px; color:#748097; font-size:11px; }
.legal-footer span { margin-right:auto; }
.onboarding-page,.loading-page { min-height:100vh; background:#f4f6fa; display:grid; place-items:center; padding:24px; }
.onboarding-card { width:min(620px,100%); background:#fff; border:1px solid #dce1eb; box-shadow:0 24px 70px rgba(23,35,74,.12); padding:50px; }
.onboarding-progress { margin:40px 0 36px; display:flex; align-items:center; max-width:160px; }
.onboarding-progress span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; border:1px solid #cbcfe0; font-size:11px; font-weight:700; }
.onboarding-progress span.done { background:#e9e7ff; color:var(--violet); border-color:#c7c2ff; }
.onboarding-progress i { height:1px; background:#cbcfe0; flex:1; }
.onboarding-card>p:not(.eyebrow) { color:#68738a; line-height:1.7; font-size:14px; }
.terms-check { margin:28px 0; padding:19px; border:1px solid #dce1eb; display:flex; align-items:flex-start; gap:12px; color:#4f5a72; font-size:12px; line-height:1.6; }
.terms-check input { margin-top:3px; accent-color:var(--violet); }
.terms-check a { color:var(--violet); text-decoration:underline; }
.onboarding-card>.btn { width:100%; }
.onboarding-exit { display:block; text-align:center; color:#81899d; font-size:11px; margin-top:20px; }
.loading-page>div { text-align:center; }
.loading-page .brand-mark { margin:0 auto 25px; }
.loading-page h1 { font-size:22px; margin:0 0 8px; }
.loading-page p { color:#737d93; font-size:13px; }
.loading-page i { display:block; width:110px; height:2px; margin:24px auto; background:#dfe3ec; overflow:hidden; }
.loading-page i::after { content:""; display:block; width:45%; height:100%; background:var(--violet); animation:loading-slide 1s infinite alternate ease-in-out; }
@keyframes loading-slide { to { transform:translateX(125%); } }
.account-modal { width:min(480px,94vw); }
.account-identity { display:flex; align-items:center; gap:13px; padding:15px; border:1px solid var(--line); background:#fff; }
.account-identity>span { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#e7e5ff; color:var(--violet); font-weight:800; }
.account-identity>div { display:grid; gap:3px; }
.account-identity small { color:var(--muted); }
.account-links { display:grid; margin:20px 0; border-top:1px solid var(--line); }
.account-links a { display:flex; justify-content:space-between; padding:14px 2px; border-bottom:1px solid var(--line); font-size:13px; }
.account-signout { width:100%; }
.danger-link { width:100%; border:0; background:transparent; color:#b42318; font-size:11px; padding:18px 0 0; }

/* Aplicación: controles sobrios y foco en la página */
.dashboard { background:#f5f7fa; }
.dash-topbar { background:#fff; color:var(--ink); border-bottom:1px solid #e0e4ec; }
.dash-topbar .brand-mark { background:transparent url('/librete-logo.png?v=20260821') center / 185% auto no-repeat; color:transparent; }
.dash-topbar .account-label { color:#68738a; }
.dash-topbar .avatar { border:0; background:#e8e6ff; color:var(--violet); }
.dash-heading h1,.section-heading h2,.modal-head h2,.catalogue-card h2 { font-family:"Inter"; }
.library-heading { background:#fff; border-radius:8px; }
.project-card,.modal,.catalogue-card,.source-card,.draft-editor { border-radius:8px; }
.workflow-page { background:#f5f7fa; }
.workflow-top { height:68px; }
.workflow-steps .active b { background:var(--violet); border-color:var(--violet); color:#fff; }
.studio { grid-template-rows:58px 48px 1fr; background:#e8ebf2; }
.studio-top { background:#fff; color:var(--ink); grid-template-columns:390px 1fr 300px; border-bottom:1px solid #dfe3ec; box-shadow:0 1px 0 rgba(17,27,62,.02); }
.studio-top .brand-mark { width:28px; height:28px; font-size:15px; }
.back-btn { background:#f1f3f7; color:#45506c; border-radius:5px; }
.back-btn { width:auto; min-width:108px; height:34px; padding:0 11px; border:1px solid #dfe3ec; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:650 11px/1 "Inter",sans-serif; cursor:pointer; transition:background .16s,border-color .16s,color .16s; }
.back-btn:hover { background:#e9ebf2; border-color:#cbd1de; color:#27314a; }
.back-btn:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
.back-arrow { position:relative; width:17px; height:14px; flex:0 0 17px; }
.back-arrow::before { content:""; position:absolute; left:1px; top:3px; width:7px; height:7px; border-left:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(45deg); }
.back-arrow::after { content:""; position:absolute; left:2px; right:0; top:6.2px; height:1.8px; border-radius:2px; background:currentColor; }
.doc-metadata { display:grid;min-width:0;line-height:1;}.doc-title,.doc-author { color:var(--ink);background:transparent;border:1px solid transparent;border-radius:4px;min-width:0;width:100%;padding:3px 6px;}.doc-title { font-size:13px;font-weight:700;}.doc-author { color:#778197;font-size:10px;font-weight:600;}.doc-title:hover,.doc-title:focus,.doc-author:hover,.doc-author:focus { border-color:#cbd1de; background:#fff;outline:0; }
.save-state { color:#707b91; }
.save-dot { background:#36a269; }
.dark-btn { color:#3f4a65; background:#fff; border-color:#d4d9e3; border-radius:5px; }
.dark-btn.accent { background:var(--violet); color:#fff; border-color:var(--violet); }
.formatbar { background:#fff; border-bottom-color:#dfe3ec; }
.tool-btn,.tool-select { border-radius:4px; }
.tool-btn:hover,.tool-btn.active { background:#f0f1fa; border-color:#d8d5ff; color:var(--violet); }
.studio-body { grid-template-columns:72px 248px 1fr 286px; }
.rail { background:#fff; color:#677188; border-right:1px solid #dfe3ec; }
.rail-btn { color:#677188; border-radius:5px; }
.rail-btn:hover,.rail-btn.active { color:var(--violet); background:#f0efff; }
.rail-btn.active { box-shadow:inset 3px 0 var(--violet); }
.left-panel,.right-panel,.panel-head { background:#fff; border-color:#dfe3ec; }
.canvas-shell { background:#e8ebf2; background-image:none; }
.page-canvas { box-shadow:0 16px 42px rgba(28,39,77,.17); }
.project-card,.page-thumb-wrap { content-visibility:auto; contain-intrinsic-size:auto 220px; }
.zoom-control { border-color:#d4d9e3; border-radius:6px; }
.assistant-panel { background:#111b3e; border-radius:9px; }
.assistant-input button { background:var(--violet); color:#fff; }
.ai-spark { color:#aaa4ff; }
.preview-head { background:var(--ink); }
.preview-head .eyebrow { color:#c7c3ff; }

/* Planes y control de abonos */
.pricing-section { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:112px 0; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:900px; margin:48px auto 0; align-items:stretch; }
.trial-callout { max-width:900px; margin:38px auto 0; padding:24px 28px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; border:1px solid #c8c1ff; background:linear-gradient(110deg,#eeebff,#faf9ff); }
.trial-callout>span { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--violet); color:#fff; font-size:29px; font-weight:850; }
.trial-callout>div { display:grid; gap:4px; }
.trial-callout strong { font-size:15px; }
.trial-callout p { margin:0; color:#667188; font-size:11px; line-height:1.55; }
.price-card { position:relative; min-height:500px; padding:38px; border:1px solid #dfe3ec; background:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:28px; box-shadow:0 18px 55px rgba(17,27,62,.06); }
.price-card.featured-price { border:2px solid var(--violet); background:linear-gradient(145deg,#fff 55%,#f3f1ff); box-shadow:0 22px 70px rgba(91,74,214,.14); }
.price-kicker { display:block; margin-bottom:12px; color:var(--violet); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.price-card h3 { margin:0; font-size:24px; letter-spacing:-.035em; }
.price-card>div>p:not(.price) { color:#667188; font-size:13px; line-height:1.65; }
.price { display:flex; align-items:flex-end; gap:11px; margin:26px 0 18px; }
.price strong { font-size:45px; letter-spacing:-.06em; line-height:.9; }
.price span { color:#737d93; font-size:11px; font-weight:700; padding-bottom:3px; }
.price-card ul,.billing-plan ul { list-style:none; display:grid; gap:11px; padding:0; margin:0; color:#4f5a72; font-size:12px; }
.price-card li::before,.billing-plan li::before { content:"✓"; color:var(--violet); font-weight:900; margin-right:9px; }
.saving-pill { position:absolute; top:-14px; right:24px; padding:8px 13px; border-radius:999px; background:#e7e3ff; color:#4937b9; font-size:10px; font-weight:850; letter-spacing:.04em; }
.pricing-note { max-width:760px; margin:24px auto 0; color:#727c91; font-size:11px; line-height:1.6; text-align:center; }

.billing-page,.billing-admin-page { min-height:100vh; background:#f3f5f9; color:var(--ink); }
.billing-topbar { min-height:72px; padding:0 max(24px,calc((100% - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #dfe3ec; background:rgba(255,255,255,.96); }
.billing-topbar>div { display:flex; align-items:center; gap:14px; color:#6f7990; font-size:11px; }
.billing-shell,.billing-admin-shell { width:min(1080px,calc(100% - 48px)); margin:0 auto; padding:70px 0 100px; }
.billing-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; margin-bottom:34px; }
.billing-heading>div { max-width:700px; }
.billing-heading h1 { margin:0 0 14px; font:700 clamp(37px,5vw,56px)/1.04 "Inter"; letter-spacing:-.055em; }
.billing-heading>div>p:not(.eyebrow) { max-width:650px; margin:0; color:#667188; font-size:14px; line-height:1.7; }
.billing-status { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border-radius:999px; background:#e8ebf1; color:#59647a; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.billing-status i { width:7px; height:7px; border-radius:50%; background:currentColor; }
.billing-status.active { background:#dff6e9; color:#176b48; }
.billing-status.pending { background:#fff2cc; color:#8b5b00; }
.billing-status.canceled { background:#fde8e6; color:#a33a32; }
.billing-status.compact { padding:6px 9px; font-size:9px; }
.billing-return,.owner-billing-card,.billing-unavailable { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 22px; padding:20px 22px; border:1px solid #c8c1ff; background:#eeebff; }
.billing-return>div,.billing-unavailable { gap:4px; }
.billing-return>div { display:grid; }
.billing-return span,.billing-unavailable span { color:#5e6880; font-size:12px; line-height:1.55; }
.billing-overview,.billing-admin-metrics { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:28px; border:1px solid #dfe3ec; background:#fff; box-shadow:0 12px 40px rgba(17,27,62,.04); }
.billing-overview article,.billing-admin-metrics article { min-height:105px; padding:23px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; border-right:1px solid #e3e6ed; }
.billing-overview article:last-child,.billing-admin-metrics article:last-child { border-right:0; }
.billing-overview small,.billing-admin-metrics small { color:#7a8499; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.billing-overview strong { font-size:15px; }
.billing-admin-metrics strong { font-size:27px; letter-spacing:-.04em; }
.billing-plans { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px; }
.billing-plan { position:relative; min-height:460px; padding:34px; border:1px solid #d9dee8; background:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:25px; transition:border-color .2s,box-shadow .2s,transform .2s; }
.billing-plan.selected { border-color:#9e94f6; box-shadow:0 18px 55px rgba(66,50,177,.12); transform:translateY(-3px); }
.billing-plan.featured { background:linear-gradient(145deg,#fff 60%,#f1efff); }
.billing-plan h2 { margin:0; font-size:25px; letter-spacing:-.04em; }
.billing-plan>div>p:not(.billing-price) { color:#667188; font-size:12px; line-height:1.65; }
.billing-price { display:flex; align-items:flex-end; gap:11px; margin:24px 0 17px; }
.billing-price strong { font-size:42px; line-height:.9; letter-spacing:-.06em; }
.billing-price span { color:#778197; font-size:10px; font-weight:750; }
.billing-unavailable { justify-content:flex-start; flex-direction:column; align-items:flex-start; margin-top:20px; border-color:#eadcae; background:#fff8df; }
.billing-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:22px; }
.billing-security { display:flex; align-items:flex-start; gap:7px; max-width:760px; margin:34px auto 0; color:#737d91; font-size:10px; line-height:1.6; text-align:center; }
.billing-security span { color:#19885b; font-weight:900; }
.owner-billing-card { padding:34px; border-color:#d9dee8; background:#fff; }
.owner-billing-card h2 { margin:0 0 8px; font-size:27px; }
.owner-billing-card p:not(.eyebrow) { margin:0; color:#667188; font-size:12px; }
.billing-table-wrap { overflow:auto; border:1px solid #dfe3ec; background:#fff; box-shadow:0 12px 40px rgba(17,27,62,.04); }
.billing-table-wrap table { width:100%; min-width:850px; border-collapse:collapse; }
.billing-table-wrap th { padding:13px 18px; background:#f8f9fb; color:#7b8599; font-size:9px; font-weight:800; letter-spacing:.1em; text-align:left; text-transform:uppercase; }
.billing-table-wrap td { padding:17px 18px; border-top:1px solid #e6e9ef; color:#4e5970; font-size:11px; }
.billing-table-wrap td:first-child { display:grid; gap:3px; }
.billing-table-wrap td:first-child strong { color:var(--ink); font-size:12px; }
.billing-table-wrap td:first-child small { color:#7b8599; }
.table-action { border:0; background:transparent; color:var(--violet); font-size:10px; font-weight:800; }
.admin-row-actions { min-width:150px; }
.admin-row-actions .table-action { display:block; padding:5px 0; text-align:left; }
.admin-row-actions .primary-action { color:#3527a5; font-size:11px; }
.admin-source { display:block; margin-top:4px; color:#6558c5; font-size:9px; font-weight:750; }
.billing-empty { padding:40px!important; text-align:center; }
.billing-admin-note { color:#7b8599; font-size:10px; line-height:1.6; }
.admin-user-modal { width:min(680px,94vw); display:flex; flex-direction:column; overflow:hidden; }
.admin-user-modal .modal-head,.admin-user-modal .modal-foot { flex:0 0 auto; }
.admin-user-form { display:grid; gap:20px; overflow:auto; }
.admin-user-identity { display:flex; align-items:center; gap:13px; padding:15px; border:1px solid var(--line); background:#f8f9fb; }
.admin-user-identity>span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-size:17px; font-weight:800; }
.admin-user-identity>div { display:grid; gap:3px; }
.admin-user-identity strong { font-size:15px; }
.admin-user-identity small { color:var(--muted); font-size:13px; }
.admin-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.admin-date-shortcuts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.admin-date-shortcuts button { min-height:36px; padding:0 13px; border:1px solid #d7dbea; background:#fff; color:#4336ad; font-size:13px; font-weight:750; }
.admin-date-shortcuts button:hover { border-color:#9e94f6; background:#f4f2ff; }
.admin-provider-note { display:grid; gap:5px; padding:15px 16px; border-left:3px solid #7869df; background:#f2f0ff; }
.admin-provider-note strong { font-size:14px; }
.admin-provider-note span { color:#626c82; font-size:14px; line-height:1.55; }
.admin-user-foot { justify-content:space-between; }
.admin-user-foot>div { display:flex; gap:9px; }
.account-subscription { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px; margin-top:12px; border:1px solid var(--line); background:#f8f9fb; }
.account-subscription>div { display:grid; gap:4px; }
.account-subscription small { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.account-links button { width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; padding:14px 2px; display:flex; justify-content:space-between; color:var(--ink); font:inherit; font-size:13px; text-align:left; }
.trial-dashboard { margin:0 0 18px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid #c8c1ff; background:#eeebff; }
.trial-dashboard>div { display:grid; gap:4px; }
.trial-dashboard strong { font-size:12px; }
.trial-dashboard span { color:#616b82; font-size:10px; }

@media (max-width:980px) {
  .marketing-links { display:none; }
  .landing .hero { grid-template-columns:1fr; padding-top:60px; }
  .landing .hero-copy { max-width:720px; }
  .hero-product { width:min(720px,100%); margin:0 auto; }
  .audience-grid { grid-template-columns:repeat(2,1fr); }
  .audience-grid article:nth-child(2) { border-right:0; }
  .audience-grid article:nth-child(-n+2) { border-bottom:1px solid #dfe3ec; }
  .workflow-marketing,.faq { grid-template-columns:1fr; gap:45px; }
  .workflow-marketing .section-intro { position:static; }
  .feature-split { grid-template-columns:1fr; }
  .feature-copy { padding-left:max(30px,calc((100vw - 700px)/2)); padding-right:max(30px,calc((100vw - 700px)/2)); }
  .format-grid { grid-template-columns:repeat(3,1fr); }
  .contact-section { grid-template-columns:1fr; gap:35px; padding:45px; }
  .access-shell { grid-template-columns:1fr; gap:45px; max-width:660px; }
  .access-card { max-width:480px; }
  .legal-layout { grid-template-columns:1fr; gap:35px; }
  .legal-layout>aside { position:static; }
  .legal-layout>aside nav { display:none; }
  .pricing-grid,.billing-plans { grid-template-columns:1fr; max-width:620px; margin-left:auto; margin-right:auto; }
  .billing-overview,.billing-admin-metrics { grid-template-columns:repeat(2,1fr); }
  .billing-overview article:nth-child(2),.billing-admin-metrics article:nth-child(2) { border-right:0; }
  .billing-overview article:nth-child(-n+2),.billing-admin-metrics article:nth-child(-n+2) { border-bottom:1px solid #e3e6ed; }
}

@media (max-width:640px) {
  .trim-start { grid-template-columns:1fr; gap:18px; padding:20px; }
  .marketing-header { height:66px; }
  .landing-nav { width:calc(100% - 28px); }
  .landing-nav .brand { font-size:19px; }
  .nav-login { display:none; }
  .nav-actions .btn { padding:0 12px; min-height:38px; font-size:11px; }
  .marketing-shell,.marketing-section,.contact-section { width:calc(100% - 28px); }
  .landing .hero { padding:45px 0 55px; gap:40px; }
  .landing .hero h1 { font-size:43px; }
  .landing .hero-lead { font-size:16px; }
  .landing .hero-actions { align-items:flex-start; flex-direction:column; }
  .shot-body { height:320px; grid-template-columns:44px 88px 1fr; }
  .shot-toolbar { padding-left:50px; gap:8px; }
  .shot-rail span { display:none; }
  .shot-pages { padding:10px 6px; }
  .shot-thumb { width:62px; height:86px; padding:7px; }
  .shot-thumb.cover strong { font-size:10px; margin-top:14px; }
  .shot-canvas { padding:17px 12px; }
  .shot-paper { width:190px; height:278px; padding:25px 20px; }
  .shot-paper h2 { font-size:19px; margin:18px 0 13px; }
  .shot-paper blockquote { font-size:8px; margin-top:14px; }
  .source-band div { gap:18px 24px; }
  .marketing-section { padding:78px 0; }
  .audience-grid { grid-template-columns:1fr; }
  .audience-grid article { border-right:0; border-bottom:1px solid #dfe3ec; min-height:190px; }
  .audience-grid article:last-child { border-bottom:0; }
  .audience-grid h3 { margin-top:38px; }
  .workflow-marketing { padding:78px 22px; }
  .feature-copy { padding:75px 24px; }
  .feature-visual { padding:45px 20px; }
  .spread-preview { aspect-ratio:auto; min-height:420px; }
  .spread-cover,.spread-page { padding:10%; }
  .format-grid { grid-template-columns:1fr; }
  .format-grid article { min-height:150px; }
  .format-grid h3 { margin-top:35px; }
  .contact-section { margin-bottom:70px; padding:28px 20px; }
  .contact-row { grid-template-columns:1fr; }
  .footer-main { grid-template-columns:1fr 1fr; }
  .footer-main>div:first-child { grid-column:1/-1; }
  .footer-bottom { gap:12px; flex-direction:column; }
  .access-page>header { height:66px; }
  .access-page>header>a:last-child { font-size:0; }
  .access-page>header>a:last-child::after { content:"← Inicio"; font-size:12px; }
  .access-shell { width:calc(100% - 28px); padding:45px 0; }
  .access-copy h1,.onboarding-card h1 { font-size:40px; }
  .access-card,.onboarding-card { padding:28px 22px; }
  .legal-header { height:66px; }
  .legal-header nav>a:first-child { display:none; }
  .legal-layout { width:calc(100% - 32px); padding:45px 0 75px; }
  .legal-lead { font-size:17px; }
  .legal-footer { flex-wrap:wrap; }
  .legal-footer span { width:100%; }
  .pricing-section { width:calc(100% - 28px); padding:78px 0; }
  .price-card,.billing-plan { min-height:0; padding:29px 23px; }
  .billing-topbar { min-height:66px; padding:0 14px; }
  .billing-topbar>div>span { display:none; }
  .billing-shell,.billing-admin-shell { width:calc(100% - 28px); padding:44px 0 70px; }
  .billing-heading { flex-direction:column; }
  .billing-heading h1 { font-size:40px; }
  .billing-overview,.billing-admin-metrics { grid-template-columns:1fr; }
  .billing-overview article,.billing-admin-metrics article { min-height:86px; border-right:0!important; border-bottom:1px solid #e3e6ed; }
  .billing-overview article:last-child,.billing-admin-metrics article:last-child { border-bottom:0; }
  .billing-return,.owner-billing-card { align-items:flex-start; flex-direction:column; }
  .trial-callout { grid-template-columns:1fr; align-items:flex-start; }
  .trial-callout .btn,.trial-dashboard .btn { width:100%; }
  .trial-dashboard { align-items:flex-start; flex-direction:column; }
  .billing-actions { justify-content:stretch; }
  .billing-actions .btn { width:100%; }
  .admin-form-grid { grid-template-columns:1fr; }
  .admin-user-foot { align-items:stretch; flex-direction:column-reverse; }
  .admin-user-foot>div { display:grid; grid-template-columns:1fr 1fr; }
}

@media (max-width:760px) {
  .back-btn { min-width:34px; width:34px; padding:0; }
  .back-copy { display:none; }
  .studio-top { grid-template-columns:minmax(0,1fr) auto; }
  .studio-top-left .brand-mark { display:none; }
  .doc-author { max-width:170px; }
  .draft-metadata { grid-template-columns:auto minmax(0,1fr); }
  .draft-author-field { grid-column:2; }
  .draft-imported-images { grid-template-columns:1fr; }
}

@media print {
  .studio-top,.formatbar,.rail,.left-panel,.right-panel,.zoom-control,.assistant-panel,.toast-region { display:none !important; }
  .studio,.studio-body,.canvas-shell,.canvas-scroll { display:block !important; height:auto !important; overflow:visible !important; background:#fff !important; padding:0 !important; }
  .page-stage { transform:none !important; width:auto !important; height:auto !important; }
  .page-canvas { box-shadow:none !important; margin:0 !important; break-after:page; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}