/* Shared presentation layer for the workspace and recipient experience. */
:root { --ink:#172b43; --muted:#62748a; --line:#dfe7f0; --blue:#2563eb; --radius:16px; }
body { background:#f4f7fb; font-size:14px; line-height:1.5; }
button,input,textarea,select { font-family:inherit; }
input,textarea,select { font-size:14px; line-height:1.5; padding:11px 12px; min-height:44px; transition:border-color .15s,box-shadow .15s; }
input:disabled,textarea:disabled,select:disabled { color:#53657b; background:#f6f8fb; opacity:1; cursor:default; }
label { font-size:12px; line-height:1.5; color:#43566d; gap:7px; }
.field-hint { color:#75859a; font-size:10px; font-weight:500; line-height:1.4; }
.button { min-height:42px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; gap:7px; border-radius:9px; padding:10px 15px; }
.button:disabled { cursor:default; }
.button[aria-busy="true"]::before { content:""; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:busy-spin .8s linear infinite; }
@keyframes busy-spin { to { transform:rotate(360deg); } }
.text-button { min-height:36px; font-family:inherit; font-size:12px; }
.app-shell { grid-template-columns:220px minmax(0,1fr); }
.sidebar { padding:28px 16px; background:#14273f; }
.app-shell>.sidebar { position:sticky; top:0; height:100vh; align-self:start; overflow-y:auto; overscroll-behavior:contain; }
.sidebar .brand { line-height:1.15; padding-bottom:36px; }
.sidebar nav { gap:8px; }
.nav-item { font-size:13px; padding:12px; border:1px solid transparent; }
.nav-item.active { background:#243f61; border-color:#355478; box-shadow:inset 3px 0 #75aaff; }
.nav-item span { font-size:17px; }
.sidebar-bottom small { overflow-wrap:anywhere; }
.topbar { min-height:100px; padding:22px 32px; gap:22px; }
.topbar h1 { font-size:23px; font-weight:700; overflow-wrap:anywhere; }
.top-actions { gap:8px; }
.view { padding:26px 32px 44px; }
.contract-switcher { align-items:flex-end; gap:12px; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:#fff; margin-bottom:20px; }
.contract-switcher label { max-width:460px; }
.contract-switcher p { margin-bottom:10px; }
.stepper { padding:16px 22px; height:auto; min-height:78px; justify-content:space-between; }
.step { font-family:inherit; font-size:12px; line-height:1.3; }
.step i { width:28px; height:28px; }
.stepper>div { flex:1; min-width:12px; margin:0 12px; }
.next-step { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:22px; padding:20px 24px; background:#edf4ff; border:1px solid #cfdef5; border-radius:14px; }
.next-step h2 { font-size:17px; margin:3px 0 5px; }
.next-step p:last-child { margin:0; color:#526984; font-size:13px; }
.next-step .button { flex-shrink:0; }
.workspace-grid { grid-template-columns:minmax(360px, .9fr) minmax(460px,1.3fr); gap:24px; }
.editor-panel { padding:24px; }
.editor-panel details { padding:20px 0; }
.editor-panel summary { font-size:14px; }
.editor-panel .helper { font-size:12px; }
.form-grid { gap:16px; margin-top:20px; }
.editor-actions { justify-content:flex-start; border-top:1px solid var(--line); padding-top:20px; }
.preview-panel { top:20px; }
.preview-toolbar { padding:12px 18px; min-height:58px; letter-spacing:.03em; }
.pdf-preview { height:850px; }
.status { padding:6px 10px; font-size:11px; }
.page-intro { margin:4px 0 24px; }
.page-intro h2 { font-size:24px; }
.data-table th { font-size:11px; background:#f5f8fc; }
.data-table td { padding-top:16px; padding-bottom:16px; }
.data-table tbody tr:hover { background:#f8faff; }
.metric-grid article { padding:22px; border-top:3px solid #bcd3f8; }
.metric-grid strong { font-size:30px; letter-spacing:-.04em; }
.metric-grid span { font-weight:600; }
.notification-list { max-width:none; }
.notification-item { padding:22px; }
.notification-item p { overflow-wrap:anywhere; }
.notification-meta { white-space:normal; flex-shrink:0; max-width:250px; }
.activity-list { max-width:none; }
.activity-list li { padding:18px 22px; border-left:3px solid #c6d9f4; }
.modal { border-radius:18px; padding:28px; max-height:90vh; overflow:auto; }
.modal h2 { font-size:22px; }
.modal p { line-height:1.65; }
.modal label { font-size:13px; }
.modal::backdrop { background:#10213999; backdrop-filter:blur(4px); }
.otp-login-form { width:min(410px,calc(100vw - 88px)); }
.otp-login-form .button { width:100%; margin-top:6px; }
.otp-sent-to { margin:14px 0 4px; padding:12px 14px; border:1px solid #dbe5f0; border-radius:10px; background:#f8fafc; color:#52657b; font-size:13px; }
.otp-input { text-align:center; font-size:24px; font-weight:700; letter-spacing:8px; font-variant-numeric:tabular-nums; }
.otp-login-actions { display:flex; justify-content:space-between; gap:16px; margin:2px 0 10px; }
.login-status { min-height:20px; margin:6px 0; color:#287056; font-size:13px; }
#toast { max-width:min(480px,calc(100vw - 32px)); z-index:100; padding:14px 18px; }
.sign-header { padding:20px 5%; }
.sign-main { padding:30px; }
.sign-main h1 { letter-spacing:-.03em; }
.sign-card { padding:28px; }
.sign-card .decline-button { margin-top:12px; }
.access-card { box-shadow:0 12px 40px #142a4508; }
.access-code { min-height:64px; font-family:inherit; font-size:26px; }
@media (max-width:1200px) {
  .app-shell { grid-template-columns:190px minmax(0,1fr); }
  .topbar,.view { padding-left:22px; padding-right:22px; }
  .workspace-grid { grid-template-columns:1fr; }
  .preview-panel { position:static; }
  .topbar { flex-wrap:wrap; }
}
@media (max-width:700px) {
  .app-shell { display:block; }
  .app-shell .sidebar { position:static; height:auto; overflow:visible; padding:10px 12px; }
  .sidebar nav { overflow-x:auto; justify-content:flex-start; gap:6px; padding-bottom:3px; }
  .nav-item { font-size:12px; padding:10px; }
  .sidebar .sidebar-bottom { display:flex; position:static; margin:8px 0 0; padding:8px 4px 0; border-color:#36506b; }
  .sidebar-bottom .avatar,.sidebar-bottom strong,.sidebar-bottom small { display:none; }
  .sidebar-bottom>div { margin-left:auto; }
  .topbar { padding:18px 16px; gap:16px; }
  .topbar h1 { font-size:21px; }
  .top-actions { width:100%; flex-wrap:wrap; }
  .top-actions .save-state { flex-basis:100%; }
  .top-actions .button { flex:1; font-size:12px; padding:9px 10px; }
  .view { padding:16px; }
  .contract-switcher { padding:16px; align-items:flex-end; }
  .contract-switcher label { min-width:0; flex:1 1 65%; }
  .contract-switcher p { margin:0; }
  .stepper { padding:14px 10px; gap:4px; }
  .stepper .step { flex:1; min-width:0; flex-direction:column; gap:6px; padding:0; font-size:10px; }
  .step span { display:block; white-space:normal; text-align:center; }
  .stepper>div { flex:0 0 6px; min-width:6px; margin:0; }
  .next-step { padding:18px; align-items:stretch; flex-direction:column; gap:14px; }
  .next-step .button { width:100%; }
  .editor-panel { padding:20px; }
  .editor-actions .button { flex:1 1 40%; }
  .notification-item { flex-direction:column; gap:14px; padding:18px; }
  .notification-meta { text-align:left; max-width:none; width:100%; }
  .split-heading { flex-wrap:wrap; }
  .template-card { flex-wrap:wrap; padding:20px; }
  .template-card .use-template { margin-left:0; }
  .sign-main { padding:20px 16px; }
  .sign-card { padding:22px; }
  .modal { padding:24px; width:calc(100vw - 32px); }
  .modal-actions { gap:8px; flex-wrap:wrap; }
  .metric-grid { gap:12px; }
  .metric-grid article { padding:16px; }
  .pdf-preview { height:620px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }
/* Administrative overview */
#dashboard{max-width:1680px;margin:0 auto}
.dashboard-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:4px 0 28px}
.dashboard-heading h2{font-size:28px;letter-spacing:-.04em;margin:6px 0 8px;line-height:1.2}
.dashboard-heading p:not(.eyebrow){margin:0;color:var(--muted);font-size:13px;max-width:540px}
.dashboard-heading>div:last-child{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
#dashboardUpdated{font-size:11px;color:var(--muted)}
.dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px}
.dashboard-metrics article{background:white;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 4px 16px #19355204}
.metric-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;color:#53657c}
.metric-label b{font-size:11px;font-weight:500;background:#edf3fc;color:#6883aa;padding:6px 9px;border-radius:8px}
.dashboard-metrics strong{display:block;font-size:40px;line-height:1.25;letter-spacing:-.05em;margin:18px 0 10px}
.dashboard-metrics small{display:block;font-size:11px;color:#6b7b90;line-height:1.5}
.metric-success strong{color:#138168}.metric-success .metric-label b{background:#e8f7f0;color:#138168}
.metric-pending strong{color:#b87818}.metric-pending .metric-label b{background:#fff5df;color:#b87818}
.metric-alert strong{color:#ba5362}.metric-alert .metric-label b{background:#fff0f2;color:#ba5362}
.dashboard-main-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;margin-bottom:24px}
#dashboard .card-heading{padding:22px 24px;min-height:86px;gap:12px}
#dashboard .card-heading h3{font-size:16px;margin:3px 0 0;letter-spacing:-.02em}
#dashboard .eyebrow{font-size:9px;letter-spacing:.12em}
.subtle-tag{font-size:10px;background:#f3f6fa;border:1px solid #e7edf5;color:#64758a;padding:5px 9px;border-radius:7px;white-space:nowrap}
.pipeline-list{padding:6px 24px 16px}
.pipeline-row{display:grid;grid-template-columns:150px 1fr 24px;gap:18px;align-items:center;padding:13px 0;border-bottom:1px solid #f0f3f8}
.pipeline-row:last-child{border:0}.pipeline-row strong{display:block;font-size:12px;font-weight:600}.pipeline-row small{font-size:10px;color:#7c889a}
.pipeline-row>b{text-align:right;font-size:13px}.pipeline-meter progress{display:block;width:100%;height:7px;border:0;border-radius:8px;overflow:hidden;background:#eef2f8;accent-color:#6594e8}
.pipeline-meter progress::-webkit-progress-bar{background:#eef2f8;border-radius:8px}.pipeline-meter progress::-webkit-progress-value{background:#6594e8;border-radius:8px}
.pipeline-row:nth-child(4) progress{accent-color:#39a28a}.pipeline-row:nth-child(4) progress::-webkit-progress-value{background:#39a28a}
.pipeline-row:nth-child(5) progress{accent-color:#cc7780}.pipeline-row:nth-child(5) progress::-webkit-progress-value{background:#cc7780}
.attention-dot{width:9px;height:9px;border-radius:50%;background:#e8b457;box-shadow:0 0 0 5px #fff7e7}
.card-description{padding:0 24px;color:var(--muted);font-size:11px;margin:16px 0 6px}
.attention-list{padding:0 14px 16px}.attention-item{display:flex;align-items:center;gap:12px;background:transparent;border:0;border-radius:10px;padding:13px 10px;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.attention-item:hover{background:#f6f9ff}.attention-item>span:nth-child(2){flex:1;min-width:0}.attention-item strong{display:block;font-size:12px;overflow-wrap:anywhere}.attention-item small{display:block;color:#7a889a;font-size:11px;margin-top:3px}
.attention-symbol{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;background:#edf4ff;color:#3b70c3;border-radius:9px}.attention-symbol.is-declined{background:#fff0f2;color:#b54858}
.dashboard-agreements{margin-bottom:24px}.dashboard-filter{display:flex;align-items:center;gap:10px;font-size:11px;color:#758297}.dashboard-filter select{width:185px;font-size:12px;min-height:38px;padding:8px 10px}
.table-caption{font-size:11px;color:#7c889a;margin:0;padding:14px 24px;border-top:1px solid var(--line)}
.dashboard-bottom-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin-bottom:24px;align-items:start}
.dashboard-feed{list-style:none;margin:0;padding:8px 24px 18px}.dashboard-feed li{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid #f0f3f8}.dashboard-feed li:last-child{border:0}.feed-dot{width:7px;height:7px;border-radius:50%;background:#8fabd4;flex-shrink:0;margin-top:6px}.dashboard-feed strong{display:block;font-size:12px;font-weight:600}.dashboard-feed span:not(.feed-dot),.dashboard-feed time{font-size:11px;color:#78879b;display:block}.dashboard-feed time{font-size:10px;margin-top:3px}
.dashboard-empty{padding:28px 24px!important;text-align:center;color:#738198;font-size:12px}.dashboard-empty strong{color:#445773}.dashboard-empty p{margin:8px 0 0}
.dashboard-audit{padding:0!important;overflow:hidden}.dashboard-audit>summary{padding:20px 24px;font-size:13px}.dashboard-audit>summary span{border:0;color:#7c889a;font-weight:400;padding:0;margin:0 12px;font-size:11px}.dashboard-audit[open]>summary{border-bottom:1px solid var(--line)}
@media(max-width:1150px){.dashboard-main-grid,.dashboard-bottom-grid{grid-template-columns:1fr}.dashboard-metrics{gap:12px}.dashboard-metrics article{padding:16px}.dashboard-metrics strong{font-size:34px}}
@media(max-width:700px){.dashboard-heading{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:20px}.dashboard-heading h2{font-size:25px}.dashboard-heading>div:last-child{flex-direction:row;align-items:center;justify-content:space-between;width:100%}.dashboard-metrics{grid-template-columns:1fr 1fr;gap:12px}.dashboard-metrics article{padding:16px}.metric-label{font-size:11px}.metric-label b{display:none}.dashboard-metrics strong{font-size:32px;margin:12px 0 8px}.dashboard-metrics small{font-size:10px}#dashboard .card-heading{padding:18px;flex-wrap:wrap}.pipeline-list{padding:6px 18px 16px}.pipeline-row{grid-template-columns:130px 1fr 22px;gap:12px}.dashboard-filter{width:100%;justify-content:space-between}.dashboard-filter select{flex:1;max-width:200px}.dashboard-feed{padding:8px 18px 16px}.dashboard-audit>summary span{display:block;margin:6px 0 0}.dashboard-main-grid,.dashboard-bottom-grid{gap:18px;margin-bottom:18px}}
@media(max-width:700px){.dashboard-agreements .data-table thead{display:none}.dashboard-agreements .data-table,.dashboard-agreements .data-table tbody{display:block;width:100%}.dashboard-agreements .data-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:16px;border-bottom:1px solid var(--line)}.dashboard-agreements .data-table td{display:block;border:0;padding:0!important;align-self:center;overflow-wrap:anywhere}.dashboard-agreements .data-table td:nth-child(3){font-size:11px;color:var(--muted)}.dashboard-agreements .data-table td:nth-child(4){text-align:right}.dashboard-agreements .data-table .status{font-size:10px}.dashboard-agreements .text-button{font-size:11px}}

/* Collapsible desktop navigation */
.app-shell { transition:grid-template-columns .22s ease; }
.sidebar { transition:padding .22s ease; }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 8px; margin-bottom:36px; }
.sidebar-header .brand { min-width:0; padding:0; }
.sidebar-collapse { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; padding:0; border:1px solid #3d5775; border-radius:50%; background:transparent; color:#c4d2e3; cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease; }
.sidebar-collapse svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.sidebar-collapse .sidebar-chevron { transform-origin:center; transition:transform .22s ease; }
.sidebar-collapse:hover { background:#203b5a; border-color:#6684a8; color:#ffffff; }
.sidebar-collapse:focus-visible { outline:3px solid #8cbcff; }
.nav-item { display:flex; align-items:center; gap:8px; position:relative; }
.nav-item .nav-icon { display:inline-grid; place-items:center; width:27px; min-width:27px; }
.nav-item .nav-icon svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.nav-item .nav-label { display:inline; width:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:inherit; }
.app-shell.sidebar-collapsed { grid-template-columns:76px minmax(0,1fr); }
.app-shell.sidebar-collapsed .sidebar { padding-left:10px; padding-right:10px; }
.app-shell.sidebar-collapsed .sidebar-header { flex-direction:column; gap:14px; padding:0; margin-bottom:28px; }
.app-shell.sidebar-collapsed .brand { justify-content:center; padding:0; }
.app-shell.sidebar-collapsed .sidebar-chevron { transform:rotate(180deg); }
.app-shell.sidebar-collapsed .brand-copy,.app-shell.sidebar-collapsed .nav-label,.app-shell.sidebar-collapsed .account-copy { display:none; }
.app-shell.sidebar-collapsed .nav-item { justify-content:center; padding:12px 8px; }
.app-shell.sidebar-collapsed .nav-item .nav-icon { width:auto; min-width:0; }
.app-shell.sidebar-collapsed .nav-item.active { box-shadow:inset 0 3px #75aaff; }
.app-shell.sidebar-collapsed .notification-badge { position:absolute; top:3px; right:2px; min-width:16px; height:16px; padding:0 3px; margin:0; font-size:9px; }
.app-shell.sidebar-collapsed .sidebar-bottom { justify-content:center; padding-left:0; padding-right:0; }
@media(max-width:700px){
  .sidebar-header { margin:0; padding:0; }
  .sidebar-collapse { display:none; }
  .app-shell.sidebar-collapsed { display:block; }
  .app-shell.sidebar-collapsed .sidebar { padding:12px 16px; }
  .app-shell.sidebar-collapsed .nav-label { display:inline; }
  .app-shell.sidebar-collapsed .account-copy { display:block; }
  .app-shell.sidebar-collapsed .nav-item { justify-content:flex-start; padding:8px; }
  .app-shell.sidebar-collapsed .nav-item.active { box-shadow:inset 3px 0 #75aaff; }
  .app-shell.sidebar-collapsed .notification-badge { position:static; min-width:19px; height:19px; padding:0 5px; margin-left:7px; font-size:10px; }
}

/* Custom template management */
.template-library { display:grid; gap:16px; max-width:1050px; }
.template-library-list { display:grid; gap:16px; }
.current-template-summary { display:flex; align-items:center; gap:12px; padding:14px 17px; border:1px solid #b9d3fb; border-radius:12px; background:linear-gradient(100deg,#edf5ff,#f8fbff); color:#355270; box-shadow:0 7px 20px rgba(32,91,174,.07); }
.current-template-summary[hidden] { display:none; }
.current-template-summary-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:#2563eb; color:#fff; font-size:17px; font-weight:800; }
.current-template-summary div { display:grid; gap:2px; }
.current-template-summary div>span { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.current-template-summary strong { color:#132f50; font-size:14px; }
.template-library-card { position:relative; max-width:none; min-height:128px; padding:22px; transition:border-color .18s,box-shadow .18s,background .18s; }
.template-library-card.is-current { border:2px solid #2c6ee8; background:linear-gradient(105deg,#f5f9ff 0,#fff 58%); box-shadow:0 0 0 4px rgba(44,110,232,.1),0 12px 28px rgba(24,62,116,.1); }
.template-library-card.is-current::before { content:""; position:absolute; inset:18px auto 18px -2px; width:5px; border-radius:0 6px 6px 0; background:#2c6ee8; }
.template-library-card.is-archived { background:#f8fafc; box-shadow:none; opacity:.78; }
.template-library-card .template-icon { display:grid; place-items:center; flex:0 0 48px; height:48px; padding:0; font-size:17px; font-weight:800; }
.template-card-content { min-width:0; flex:1; }
.template-card-top { display:flex; align-items:center; gap:10px; }
.template-card-top .eyebrow { margin:0; }
.template-state { display:inline-flex; padding:3px 7px; border-radius:999px; background:#eef1f5; color:#687789; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.template-state.active { background:#e6f5ee; color:#137456; }
.template-current { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px; background:#2563eb; color:#fff; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.055em; box-shadow:0 4px 10px rgba(37,99,235,.18); }
.template-current[hidden] { display:none; }
.template-current span { font-size:11px; }
.template-meta { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; color:#77869a; font-size:10px; }
.template-meta a { color:var(--blue); text-decoration:none; font-weight:700; }
.template-card-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; max-width:230px; }
.template-library-card.is-current .template-card-actions>.button:disabled { border-color:#b9d3fb; background:#e8f1ff; color:#1e5fbf; opacity:1; }
.text-button.danger { color:#ad3948; }
.template-empty-card { padding:34px; border:1px dashed #cbd6e3; border-radius:14px; text-align:center; color:#708095; background:#f8fafc; }
.template-empty-card strong { color:#40536a; }
.template-empty-card p { margin:7px 0 0; font-size:12px; }
.template-dialog { width:min(1500px,calc(100vw - 20px)); max-height:calc(100vh - 20px); padding:22px; }
.template-dialog code { padding:2px 5px; border-radius:5px; background:#eef2f7; color:#334a67; font:600 11px ui-monospace,SFMono-Regular,Consolas,monospace; }
.template-rules { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; margin:18px 0; border:1px solid #dbe5f0; border-radius:10px; background:#f8fafd; font-size:12px; color:#53667c; }
.template-rules small { flex-basis:100%; color:#76869a; }
.template-fields-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:22px 0 10px; }
.template-fields-heading h3 { margin:0; font-size:16px; }
.template-fields-heading p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.template-fields-heading>span { padding:5px 8px; border-radius:7px; background:#edf3fc; color:#506f9c; font-size:10px; font-weight:700; }
.template-field-palette { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px; margin-bottom:10px; border:1px solid #dbe5f0; border-radius:11px; background:#f8fafc; }
.template-field-palette>div { display:grid; gap:2px; margin-right:auto; }
.template-field-palette strong { color:#263d58; font-size:12px; }
.template-field-palette small { color:#78889c; font-size:10px; }
.template-field-palette button { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 9px; border:1px solid #d4dfec; border-radius:8px; background:#fff; color:#40536a; font-family:inherit; font-size:10px; font-weight:700; cursor:grab; }
.template-field-palette button:hover { border-color:#92b4e6; background:#f1f6fd; color:#215dad; }
.template-field-palette button:active { cursor:grabbing; }
.template-field-palette button span { display:grid; place-items:center; width:19px; height:19px; border-radius:5px; background:#e8f0fc; color:#3971bd; font-size:10px; }
.template-field-list { display:grid; gap:9px; max-height:360px; overflow:auto; padding-right:3px; }
.template-field-list.is-drag-target { outline:2px solid #75a8ef; outline-offset:3px; border-radius:10px; }
.template-field-row { display:grid; grid-template-columns:28px minmax(135px,.9fr) minmax(140px,1fr) minmax(100px,.65fr) minmax(120px,.85fr) minmax(115px,.8fr) 74px 30px; gap:9px; align-items:end; padding:12px 10px; border:1px solid #e1e7ef; border-radius:10px; background:#fbfcfe; transition:border-color .15s,box-shadow .15s,opacity .15s; }
.template-field-row.dragging { opacity:.45; }
.template-field-row.drag-over { border-color:#75a8ef; box-shadow:0 -2px 0 #3b82e6; }
.template-field-row label { margin:0; font-size:10px; }
.template-field-row input,.template-field-row select { min-height:38px; padding:8px; font-size:12px; }
.template-field-row .field-key { min-width:0; }
.template-field-row .field-key small { display:flex; align-items:center; gap:5px; min-height:18px; margin-top:3px; overflow:hidden; }
.template-field-row .field-key .field-number { display:inline-grid; place-items:center; flex:0 0 20px; height:18px; border-radius:5px; background:#e8f0fc; color:#5277ac; font-size:8px; }
.template-field-row .field-key code { display:block; padding:0; overflow:hidden; text-overflow:ellipsis; background:transparent; font-size:9px; white-space:nowrap; }
.template-field-row .field-required { align-self:center; flex-direction:row; }
.field-drag-handle { display:grid; grid-template-columns:repeat(2,3px); gap:3px; place-content:center; align-self:center; width:28px; height:38px; padding:0; border:0; border-radius:7px; background:transparent; cursor:grab; }
.field-drag-handle:hover { background:#eaf1fb; }
.field-drag-handle:active { cursor:grabbing; }
.field-drag-handle span { width:3px; height:3px; border-radius:50%; background:#718399; }
.remove-template-field { align-self:center; width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent; color:#a64753; font-size:20px; line-height:1; cursor:pointer; }
.remove-template-field:hover:not(:disabled) { background:#fdecef; }
.remove-template-field:disabled { color:#cbd5df; cursor:not-allowed; }
.template-empty { margin:0; padding:28px; border:1px dashed #cbd6e3; border-radius:10px; text-align:center; color:#77869a; font-size:12px; }
.template-designer { display:grid; grid-template-columns:180px minmax(520px,1fr) 250px; min-height:650px; max-height:70vh; border:1px solid #d9e2ec; border-radius:13px; overflow:hidden; background:#edf1f5; }
.template-designer-palette,.template-field-properties { position:sticky; top:0; align-self:start; box-sizing:border-box; width:100%; height:70vh; padding:14px; overflow:auto; background:#fff; }
.template-designer-palette { border-right:1px solid #d9e2ec; }
.template-field-properties { border-left:1px solid #d9e2ec; }
.designer-panel-title { display:grid; gap:3px; padding:2px 2px 12px; }
.designer-panel-title strong { color:#203751; font-size:13px; }
.designer-panel-title small { color:#8492a4; font-size:10px; }
.template-designer-palette button { display:flex; align-items:center; gap:9px; width:100%; min-height:39px; margin:0 0 7px; padding:7px 9px; border:1px solid #dbe4ee; border-radius:8px; background:#fff; color:#40536a; font-family:inherit; font-size:11px; font-weight:650; text-align:left; cursor:grab; }
.template-designer-palette button:hover,.template-designer-palette button.is-pending { border-color:#6d9fe4; background:#eef5ff; color:#1f61bd; }
.template-designer-palette button span { display:grid; place-items:center; flex:0 0 25px; height:25px; border-radius:6px; background:#eaf1fb; color:#2e6fc8; font-size:9px; font-weight:800; }
.template-designer-palette .signature-tool { border-color:#f0c5cb; color:#9f3440; }
.template-designer-palette .signature-tool span { background:#fdecef; color:#b43241; font-size:15px; }
.template-designer-palette .signed-date-tool { border-color:#bfd2ea; color:#315f94; }
.template-designer-palette .signed-date-tool span { background:#e8f1fb; color:#2e659f; }
.designer-tool-divider { height:1px; margin:11px 0; background:#e4eaf1; }
.template-designer-canvas { position:relative; overflow:auto; padding:18px; background:#e8edf2; }
.template-designer-canvas .pdf-page { position:relative; max-width:760px; min-width:500px; }
.template-designer-canvas .pdf-page canvas { position:relative; z-index:1; }
.template-designer-canvas .pdf-page figcaption { position:relative; z-index:1; }
.template-designer-empty { display:grid; place-content:center; gap:6px; min-height:610px; text-align:center; color:#7b899a; }
.template-designer-empty strong { color:#40536a; }
.template-page-overlay { position:absolute; z-index:2; inset:27px 0 0; height:calc(100% - 27px); }
.designer-field { position:absolute; display:flex; align-items:center; min-width:28px; min-height:20px; padding:3px 7px; border:1.5px solid #3679d4; border-radius:4px; background:#e7f0ffdc; color:#174f9d; font-size:10px; font-weight:700; line-height:1.15; box-shadow:0 1px 4px #12345a24; cursor:move; user-select:none; touch-action:none; overflow:hidden; }
.designer-field.signature { border-color:#c83b4b; background:#ffeaeddf; color:#9d2432; }
.designer-field.signed-date { border-color:#3f75ac; background:#eaf3ffdf; color:#245e9d; }
.designer-field.selected { outline:2px solid #173e70; outline-offset:2px; }
.designer-field .resize-handle { position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:8px 0 3px; background:#276bc7; cursor:nwse-resize; }
.designer-field.signature .resize-handle { background:#b62f3e; }
.template-field-properties label { margin:12px 0; font-size:10px; }
.template-field-properties input,.template-field-properties select,.template-field-properties textarea { min-height:37px; padding:8px; font-size:11px; }
.template-field-properties .button { width:100%; margin-top:14px; }
.template-field-properties .button.danger { border-color:#efc4ca; color:#a8313f; }
.property-empty { padding:28px 8px; color:#8795a5; font-size:11px; text-align:center; }
.template-designer-canvas.is-field-target { box-shadow:inset 0 0 0 3px #6d9fe4; }
@media(max-width:1100px){.template-field-row{grid-template-columns:28px 1fr 1fr 1fr}.template-field-row .field-required{align-self:end;min-height:38px}.remove-template-field{align-self:end}}
@media(max-width:1100px){.template-designer{grid-template-columns:150px minmax(500px,1fr)}.template-field-properties{grid-column:1/-1;border-left:0;border-top:1px solid #d9e2ec}.template-field-properties #templatePropertyForm{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}.template-field-properties .button{align-self:end}}
@media(max-width:700px){.template-library-card{align-items:flex-start;flex-wrap:wrap}.template-library-card .template-card-actions{max-width:none;width:100%;justify-content:flex-start;margin-left:66px}.template-field-row{grid-template-columns:28px 1fr}.template-field-row>*:not(.field-drag-handle){grid-column:2}.template-field-list{max-height:none}.template-field-row .field-key{margin-bottom:4px}.template-dialog .form-grid.two{grid-template-columns:1fr}.template-field-palette>div{flex-basis:100%}.template-designer{display:block;max-height:none}.template-designer-palette{display:flex;flex-wrap:wrap;gap:6px;border-right:0;border-bottom:1px solid #d9e2ec}.template-designer-palette .designer-panel-title{flex-basis:100%}.template-designer-palette button{width:auto;margin:0}.template-designer-canvas{height:620px}.template-field-properties #templatePropertyForm{display:block}}