/* The sender app: shell, dashboard, setup, editor, detail, settings. */
body.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100dvh; }
body.app.is-bare { display: block; }
body.app.is-bare .main { padding: 0; }

/* ---- Sidebar ---- */
.side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 18px; padding: 22px 16px 16px; background: var(--ink); color: #dfe5f1; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; padding: 0 6px; }
.brand .mark { width: 36px; height: 36px; color: rgba(255, 255, 255, .11); flex: none; }
.brand-name { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.brand-name em { font-style: normal; color: var(--gold); font-weight: 500; }
.brand-lg { justify-content: center; color: var(--ink); margin-bottom: 18px; }
.brand-lg .mark { width: 44px; height: 44px; color: var(--ink); }
.brand-lg .brand-name { font-size: 26px; }
.brand-lg .brand-name em { color: #b9860a; }
.side-new { margin-top: 4px; min-height: 46px; font-size: 15px; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #c3cbdb; text-decoration: none; font-weight: 550; font-size: 14.5px; transition: background .12s, color .12s; }
.nav-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-link.is-active { background: rgba(255, 255, 255, .12); color: #fff; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 6px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font-weight: 700; flex: none; }
.who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.who-text strong { font-size: 13.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-text small { font-size: 12px; color: #9aa6bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .link-quiet { color: #9aa6bd; text-align: left; }
.side .link-quiet:hover { color: #fff; }
.tabbar { display: none; }

/* ---- Main ---- */
.main { padding: 30px 34px 60px; min-width: 0; outline: none; }
.wrap { max-width: 1080px; margin: 0 auto; }
.wrap-narrow { max-width: 780px; margin: 0 auto; }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ph p { color: var(--muted); margin-top: 4px; }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 12px; }
.section-title a { font-size: 13.5px; font-weight: 600; text-decoration: none; }

/* ---- Dashboard ---- */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.quick-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); text-align: left; transition: transform .12s, box-shadow .15s, border-color .15s; cursor: pointer; font: inherit; }
.quick-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }
.quick-tile .ico-wrap { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); margin-bottom: 6px; }
.quick-tile > div { display: flex; flex-direction: column; gap: 3px; }
.quick-tile strong { font-size: 16px; }
.quick-tile span { color: var(--muted); font-size: 13.5px; }
.quick-tile.is-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.quick-tile.is-primary span { color: #b9c3d6; }
.quick-tile.is-primary .ico-wrap { background: var(--gold); color: var(--gold-ink); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .15s; }
.stat:hover { border-color: var(--line-2); }
.stat b { font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 13px; font-weight: 550; }
.stat.is-hot { background: #fff8e1; border-color: #f2dc9c; }
.banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff8e1; border: 1px solid #f2dc9c; margin-bottom: 18px; }
.banner .ico { flex: none; color: var(--amber); }
.banner .btn { flex: none; }
.banner p { flex: 1; font-size: 14px; }
.banner strong { display: block; }

/* ---- Document list ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { border: 0; background: none; padding: 10px 13px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.tabs button:hover { color: var(--ink); }
.tabs button.is-active { color: var(--ink); border-bottom-color: var(--gold-deep); }
.tabs .n { font-size: 12px; background: var(--slate-bg); color: #475467; border-radius: 99px; padding: 1px 7px; font-weight: 700; }
.tabs .n.is-hot { background: var(--gold); color: var(--gold-ink); }
.search { position: relative; max-width: 320px; flex: 1; }
.search input { padding-left: 36px; }
.search .ico { position: absolute; left: 11px; top: 12px; color: var(--muted); }
.doc-list { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.doc-row { display: grid; grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 1fr) auto 36px; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: background .1s; }
.doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: #fbfaf7; }
.doc-thumb { width: 44px; height: 56px; border-radius: 4px; border: 1px solid var(--line); background: #fff center/cover no-repeat; box-shadow: var(--shadow-sm); display: grid; place-items: center; color: #b6bcc8; overflow: hidden; }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.doc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-main strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-main small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-people { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.doc-people span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.doc-people em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-people .state { color: var(--muted); flex: none; }
.p-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #cbd2dc; }
.p-dot.is-signed { background: var(--green); } .p-dot.is-viewed { background: var(--blue); } .p-dot.is-sent { background: var(--gold-deep); } .p-dot.is-declined { background: var(--red); }
.row-more { width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
.row-more:hover { background: var(--slate-bg); color: var(--ink); }

/* ---- Setup (step 1) ---- */
.steps { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); flex-wrap: wrap; }
.steps span { display: flex; align-items: center; gap: 7px; }
.steps i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--slate-bg); font-style: normal; font-size: 12px; }
.steps .is-on { color: var(--ink); } .steps .is-on i { background: var(--ink); color: #fff; }
.steps .is-done i { background: var(--green); color: #fff; }
.steps .sep { width: 22px; height: 1.5px; background: var(--line-2); }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; border: 2px dashed var(--line-2); border-radius: 16px; background: #fffdf8; text-align: center; transition: border-color .15s, background .15s; cursor: pointer; }
.drop:hover, .drop.is-over { border-color: var(--gold-deep); background: #fff8e1; }
.drop .ico-wrap { width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; margin-bottom: 6px; }
.drop strong { font-size: 16px; }
.drop.is-compact { flex-direction: row; padding: 14px 16px; justify-content: center; }
.drop.is-compact .ico-wrap { width: 34px; height: 34px; margin: 0; }
.progress { height: 6px; border-radius: 99px; background: var(--slate-bg); overflow: hidden; width: 100%; max-width: 260px; }
.progress i { display: block; height: 100%; background: var(--gold-deep); width: 0; transition: width .15s; }
.file-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.file-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.file-item .doc-thumb { width: 36px; height: 46px; }
.seg { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: 12px; }
.seg button { border: 0; background: transparent; padding: 9px 14px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted); white-space: nowrap; }
.seg button.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.people { display: flex; flex-direction: column; gap: 10px; }
.person { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.15fr) 196px 34px; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; position: relative; }
.person.has-order { grid-template-columns: 30px 52px minmax(0, 1fr) minmax(0, 1.15fr) 196px 34px; }
.person .badge { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--cx-bg); color: var(--cx-ink); }
.person .badge.c0 { background: var(--c0); color: var(--c0-ink); } .person .badge.c1 { background: var(--c1); color: #fff; } .person .badge.c2 { background: var(--c2); color: #fff; }
.person .badge.c3 { background: var(--c3); color: #fff; } .person .badge.c4 { background: var(--c4); color: #fff; } .person .badge.c5 { background: var(--c5); color: #fff; }
.person input, .person select { min-height: 38px; font-size: 14.5px; padding: 7px 10px; }
.person .extra { grid-column: 2 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.person .extra select, .person .extra input { width: auto; flex: 1 1 180px; }
.person .me-tag { font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-bg); border-radius: 99px; padding: 2px 9px; }
.suggest { position: absolute; z-index: 50; left: 38px; right: 10px; top: 52px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 5px; }
.suggest button { display: flex; flex-direction: column; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 8px; }
.suggest button:hover { background: var(--paper); }
.suggest small { color: var(--muted); }
.foot-bar { position: sticky; bottom: 0; margin: 26px -34px -60px; padding: 14px 34px; background: rgba(245, 243, 238, .92); backdrop-filter: blur(8px); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; z-index: 20; }
.foot-bar .spacer { flex: 1; }

/* ---- Editor (step 2) ---- */
.ed { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: 264px minmax(0, 1fr) 264px; height: 100dvh; background: #e9e6df; }
.ed-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--ink); color: #fff; z-index: 30; }
.ed-top .btn-quiet { color: #fff; } .ed-top .btn-quiet:hover { background: rgba(255,255,255,.12); }
.ed-title { background: transparent !important; border: 1px solid transparent !important; color: #fff !important; font-weight: 600; font-size: 15.5px !important; min-height: 36px !important; padding: 4px 8px !important; max-width: 380px; text-overflow: ellipsis; }
.ed-title:hover { border-color: rgba(255,255,255,.25) !important; }
.ed-title:focus { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.4) !important; box-shadow: none !important; }
.ed-saved { font-size: 12.5px; color: #9aa6bd; white-space: nowrap; }
.ed-side, .ed-props { background: #fff; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 18px; }
.ed-side { border-right: 1px solid var(--line); } .ed-props { border-left: 1px solid var(--line); }
.ed-side h3, .ed-props h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 8px; }
.ed-stage { overflow: auto; position: relative; scroll-behavior: smooth; }
.who-list { display: flex; flex-direction: column; gap: 6px; }
.who-btn { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-weight: 600; font-size: 14px; text-align: left; min-width: 0; }
.who-btn span.grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-btn small { color: var(--muted); font-weight: 600; font-size: 12px; flex: none; }
.who-btn.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tool { display: flex; align-items: center; gap: 6px; padding: 10px 8px; white-space: nowrap; border-radius: 10px; border: 1.5px solid var(--tc, var(--line-2)); background: var(--tbg, #fff); color: var(--tink, var(--ink)); font-weight: 600; font-size: 13px; cursor: grab; touch-action: none; user-select: none; }
.tool.wide { grid-column: 1 / -1; }
.tool:hover { filter: brightness(.97); }
.tool.is-armed { box-shadow: 0 0 0 2.5px var(--ink); }
.tool-ghost { position: fixed; z-index: 300; pointer-events: none; padding: 7px 11px; border-radius: 8px; font-weight: 700; font-size: 13px; background: var(--gold); color: var(--gold-ink); box-shadow: var(--shadow); transform: translate(-50%, -50%); display: flex; gap: 6px; align-items: center; }
.ed-hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.ed .doc-pages { padding-top: 22px; }
.ed .doc-pages.is-armed .doc-page { cursor: copy; }
/* Fields in the editor */
.ed .fld { border: 1.5px solid var(--fc); background: var(--fbg); color: var(--fink); cursor: grab; touch-action: none; display: flex; align-items: center; gap: .5cqw; padding: 0 .6cqw; font-weight: 700; font-size: clamp(8px, 1.35cqw, 13px); overflow: visible; }
.ed .fld .fld-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.ed .fld svg { width: clamp(9px, 1.5cqw, 14px); height: clamp(9px, 1.5cqw, 14px); flex: none; pointer-events: none; }
.ed .fld.t-checkbox { padding: 0; justify-content: center; }
.ed .fld.t-checkbox .fld-label { display: none; }
.ed .fld.is-optional { border-style: dashed; }
.ed .fld.is-prefill { border-style: dotted; background: rgba(255,255,255,.6); color: #0f1729; font-weight: 400; }
.ed .fld.is-selected { box-shadow: 0 0 0 2.5px var(--blue); z-index: 5; }
.ed .fld.is-selected .fld-resize { display: block; }
.ed .fld.is-selected .fld-del { display: grid; }
.ed .fld .req { position: absolute; top: -.2cqw; right: .3cqw; color: var(--red); font-size: 1.6cqw; line-height: 1; pointer-events: none; }
.prop-row { display: flex; flex-direction: column; gap: 6px; }
.prop-empty { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.ed-mobile-bar { display: none; }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: var(--slate-bg); border-radius: 5px; padding: 1px 5px; }

/* ---- Review and send ---- */
.review-list { display: flex; flex-direction: column; gap: 8px; }
.review-person { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.review-person .grow strong { display: block; font-size: 14.5px; }
.review-person small { color: var(--muted); }
.review-person .count { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: var(--slate-bg); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.review-person .count.is-warn { background: var(--amber-bg); color: var(--amber); }
details.more summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-soft); padding: 6px 0; }
details.more > div { padding-top: 10px; display: flex; flex-direction: column; gap: 14px; }

/* ---- Detail ---- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.rc { display: flex; flex-direction: column; }
.rc-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.rc-item:last-child { border-bottom: 0; }
.rc-item .badge { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--slate-bg); color: #475467; }
.rc-item .badge.is-signed { background: var(--green-bg); color: var(--green); }
.rc-item .badge.is-declined { background: var(--red-bg); color: var(--red); }
.rc-item .badge.is-now { background: var(--gold); color: var(--gold-ink); }
.rc-item strong { display: block; font-size: 15px; }
.rc-item small { color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-actions { display: flex; gap: 6px; align-items: center; }
.track { display: flex; gap: 14px; margin-top: 5px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.track span { display: flex; align-items: center; gap: 5px; }
.track .on { color: var(--green); font-weight: 600; }
.linkbox { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 6px 6px 6px 12px; }
.linkbox code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.preview { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: #fff; position: relative; }
.preview img { display: block; width: 100%; }
.timeline { display: flex; flex-direction: column; padding: 6px 18px 14px; }
.tl { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 8px 0; position: relative; }
.tl::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); margin: 5px 0 0 4px; }
.tl.is-good::before { background: var(--green); } .tl.is-bad::before { background: var(--red); } .tl.is-gold::before { background: var(--gold-deep); }
.tl:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: -6px; width: 1.5px; background: var(--line); }
.tl b { font-size: 13.5px; font-weight: 600; display: block; }
.tl small { color: var(--muted); font-size: 12px; }
.success-hero { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--green-bg); border: 1px solid #bfe3cf; margin-bottom: 18px; }
.success-hero .ico-wrap { width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; }
.success-hero strong { display: block; font-size: 16.5px; color: #0f5132; }
.success-hero p { font-size: 14px; color: #1d6a45; }
.qr-box { text-align: center; }
.qr-box img { width: 240px; height: 240px; border-radius: 12px; border: 1px solid var(--line); }

/* ---- Templates ---- */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tpl { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .15s; }
.tpl:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tpl-thumb { height: 170px; background: var(--paper-2); overflow: hidden; border-bottom: 1px solid var(--line); display: block; }
.tpl-thumb img { width: 100%; object-fit: cover; object-position: top; display: block; }
.tpl-body { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tpl-body strong { font-size: 15px; }
.tpl-body small { color: var(--muted); }
.tpl-foot { display: flex; gap: 8px; padding: 0 14px 14px; }
.tpl-foot .btn { flex: 1; }

/* ---- Settings ---- */
.set-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: start; }
.set-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.set-nav a { padding: 8px 12px; border-radius: 9px; text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 14px; }
.set-nav a:hover { background: rgba(15, 27, 51, .06); }
.set-card { padding: 22px; margin-bottom: 18px; scroll-margin-top: 20px; }
.set-card h2 { font-family: var(--display); font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.set-card > p.muted { margin-bottom: 16px; font-size: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.status-line { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; padding: 5px 11px; border-radius: 99px; }
.status-line.is-on { background: var(--green-bg); color: var(--green); } .status-line.is-off { background: var(--amber-bg); color: var(--amber); }
.sig-preview { height: 86px; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 8px; }
.sig-preview img { max-height: 68px; max-width: 100%; }
.brand-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.brand-block { padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.brand-block:last-child { border-bottom: 0; }
.brand-more { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 10px 52px; }
.brand-more .field > span { font-size: 12px; }
.brand-row input[type="color"] { width: 42px; height: 42px; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; }
.key-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.key-row code, .codebox { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.codebox { display: block; padding: 12px; background: var(--ink); color: #e6ecf7; border-radius: 10px; overflow-x: auto; white-space: pre; line-height: 1.5; }

/* ---- Auth, messages, verify ---- */
body.auth { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; background: radial-gradient(1100px 520px at 50% -12%, rgba(20, 40, 75, .16), transparent), var(--paper); }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 32px 28px; }
.auth-card h1 { font-size: 26px; margin-bottom: 6px; text-align: center; }
.auth-card > p.muted { text-align: center; margin-bottom: 20px; }
.auth-card .alert { margin-bottom: 14px; }
.auth-alt { margin-top: 18px; font-size: 13.5px; text-align: center; color: var(--muted); }
.auth-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.state-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--amber-bg); position: relative; }
.state-icon::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 30px; color: var(--amber); }
.verify-card { max-width: 520px; }
.verify-result { margin-top: 16px; padding: 16px; border-radius: 14px; text-align: left; }
.verify-result.is-ok { background: var(--green-bg); border: 1px solid #bfe3cf; }
.verify-result.is-bad { background: var(--red-bg); border: 1px solid #f3c9c4; }
.verify-result h2 { font-size: 17px; margin-bottom: 6px; }
.verify-result dl { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; }
.verify-result dt { color: var(--muted); } .verify-result dd { margin: 0; font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .ed { grid-template-columns: 232px minmax(0, 1fr); }
  .ed-props { position: fixed; right: 12px; top: 68px; width: 264px; max-height: calc(100dvh - 90px); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); z-index: 25; }
  .ed-props.is-empty { display: none; }
  .detail { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body.app { display: block; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .side { display: none; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--ink); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar .nav-link { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 11px; justify-content: center; }
  .tabbar .nav-new { order: 3; color: var(--gold-ink); background: var(--gold); border-radius: 14px; margin: 0 6px; }
  .tabbar .nav-link:nth-child(3) { order: 4; } .tabbar .nav-link:nth-child(4) { order: 5; }
  .main { padding: 20px 14px 40px; }
  h1 { font-size: 24px; }
  .banner, .success-hero { flex-wrap: wrap; }
  .banner p, .success-hero .grow { flex: 1 1 200px; }
  .banner .btn, .success-hero .btn { flex: 1 1 100%; }
  .quick { grid-template-columns: 1fr; }
  .quick-tile { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .quick-tile .ico-wrap { margin: 0; flex: none; }
  .quick-tile > div { display: flex; flex-direction: column; }
  .stats { grid-template-columns: 1fr 1fr; }
  .doc-row { grid-template-columns: 40px minmax(0, 1fr) 30px; gap: 12px; padding: 12px; }
  .doc-row .doc-people { grid-column: 2 / 3; grid-row: 2; }
  .doc-row .pill { grid-column: 2 / 3; grid-row: 3; justify-self: start; }
  .doc-row .row-more { grid-column: 3; grid-row: 1; }
  .doc-thumb { width: 40px; height: 52px; }
  .person, .person.has-order { grid-template-columns: 30px minmax(0, 1fr) 34px; }
  .person.has-order .ord { grid-column: 2; }
  .person > input, .person > select { grid-column: 2; }
  .person .rm { grid-column: 3; grid-row: 1; }
  .foot-bar { margin: 22px -14px -40px; padding: 12px 14px; bottom: calc(60px + env(safe-area-inset-bottom)); }
  .foot-bar .btn { flex: 1; }
  .set-grid { grid-template-columns: 1fr; } .set-nav { display: none; }
  .brand-more { grid-template-columns: 1fr; margin-left: 0; }
  .brand-row { grid-template-columns: 44px minmax(0, 1fr) 34px; }
  .brand-row .check { grid-column: 2; grid-row: 2; }
  .grid-2 { grid-template-columns: 1fr; }
  .rc-item { grid-template-columns: 38px minmax(0, 1fr); }
  .rc-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  /* Editor on a phone: page on top, tools in a bar at the bottom */
  .ed { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .ed-top .btn-gold { padding: 0 12px; font-size: 13.5px; flex: none; }
  .ed-side { display: none; }
  .ed-top { flex-wrap: nowrap; gap: 6px; padding: 8px 8px; }
  .ed-title { max-width: none; min-width: 0; flex: 1; }
  .ed-saved, .ed-zoom, .ed-top .hide-m { display: none; }
  .ed-mobile-bar { display: flex; flex-direction: column; gap: 8px; background: #fff; border-top: 1px solid var(--line); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .ed-mobile-bar .who-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .ed-mobile-bar .who-btn { flex: none; padding: 6px 10px; font-size: 13px; }
  .ed-mobile-bar .who-btn small { display: none; }
  .ed-mobile-bar .palette { display: flex; overflow-x: auto; scrollbar-width: none; }
  .ed-mobile-bar .tool { flex: none; padding: 9px 11px; }
  .ed-props { left: 8px; right: 8px; top: auto; bottom: calc(118px + env(safe-area-inset-bottom)); width: auto; max-height: 46dvh; }
  .ed .doc-pages { padding: 10px 6px 40px; }
}