.cn-live-proposal[hidden],
.cn-live-proposal-preview[hidden]{display:none!important}

.cn-live-proposal{
  position:fixed;
  inset:0;
  z-index:120000;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  padding:10px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0,transparent 37%,rgba(3,18,33,.12) 100%);
}

.cn-live-proposal-shell{
  width:min(980px,63vw);
  min-width:0;
  height:100%;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid #cbd8e6;
  border-radius:18px;
  background:#eef3f8;
  box-shadow:0 28px 90px rgba(0,0,0,.36);
  pointer-events:auto;
}

.cn-live-proposal.cn-proposal-editing .cn-live-proposal-shell{
  width:min(1580px,calc(100vw - 20px));
}

.cn-live-proposal.cn-proposal-fullscreen{
  padding:0;
  pointer-events:auto;
  background:#dfe7ef;
}

.cn-live-proposal.cn-proposal-fullscreen .cn-live-proposal-shell{
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
}

.cn-live-proposal-head{
  min-height:76px;
  display:grid;
  grid-template-columns:minmax(270px,1fr) auto;
  align-items:center;
  gap:10px 18px;
  padding:12px 16px;
  color:#fff;
  background:#071b30;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.cn-live-proposal-heading{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.cn-live-proposal-heading>span:last-child{
  min-width:0;
  display:grid;
  gap:2px;
}

.cn-live-proposal-heading strong{
  font-size:18px;
  line-height:1.15;
}

.cn-live-proposal-heading small{
  overflow:hidden;
  color:#b9c9db;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cn-live-proposal-mark{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border:1px solid #d8b55b;
  border-radius:10px;
  color:#071b30;
  background:#d8b55b;
  font-weight:900;
}

.cn-live-proposal-status{
  display:flex;
  align-items:center;
  gap:8px;
  color:#b9c9db;
  font-size:11px;
  white-space:nowrap;
}

.cn-live-proposal-status{justify-self:end}

.cn-live-proposal-badge{
  padding:7px 10px;
  border:1px solid #f2cf73;
  border-radius:999px;
  color:#fff4ce;
  background:rgba(216,181,91,.15);
  font-size:11px;
  font-weight:800;
  letter-spacing:.045em;
}

.cn-live-proposal-badge[data-tone="ready"]{
  border-color:#64d49a;
  color:#d5ffe7;
  background:rgba(24,154,94,.18);
}

.cn-live-proposal-badge[data-tone="dirty"]{
  border-color:#ffbc65;
  color:#fff2dd;
  background:rgba(196,106,14,.26);
}

.cn-live-proposal-actions{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-width:0;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-color:#526a82 transparent;
  scrollbar-width:thin;
}

.cn-live-proposal-head .btn{
  min-height:40px;
  border-color:#526a82;
  color:#fff;
  background:#153752;
}

.cn-live-proposal-head .btn:hover{background:#214b6e}
.cn-live-proposal-head .btn.primary{
  border-color:#d8b55b;
  color:#071b30;
  background:#d8b55b;
}

.cn-live-proposal-head .btn.active{
  border-color:#94bad8;
  color:#071b30;
  background:#d9eaf7;
}

.cn-live-proposal-head .btn:disabled{
  cursor:not-allowed;
  opacity:.52;
}

.cn-proposal-save-top{
  display:none;
  flex:0 0 auto;
}

.cn-proposal-editing .cn-proposal-save-top{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.cn-proposal-editing.cn-proposal-dirty .cn-live-proposal-head .cn-proposal-save-top{
  border-color:#68d49c;
  color:#062a1a;
  background:#68d49c;
  box-shadow:0 0 0 3px rgba(104,212,156,.16);
}

.cn-proposal-zoom-controls{
  display:none;
  flex:0 0 auto;
  align-items:center;
  gap:4px;
  padding:3px;
  border:1px solid #526a82;
  border-radius:10px;
  background:#0d2942;
}

.cn-proposal-fullscreen .cn-proposal-zoom-controls{display:flex}

.cn-proposal-zoom-controls>span{
  padding:0 5px 0 6px;
  color:#b9c9db;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.cn-live-proposal-head .cn-proposal-zoom-controls .btn{
  min-width:34px;
  min-height:34px;
  padding:6px 9px;
  border:0;
  background:transparent;
}

.cn-live-proposal-head .cn-proposal-zoom-controls .btn:hover{background:#214b6e}

.cn-live-proposal-head .cn-proposal-zoom-controls .cn-proposal-zoom-reset{
  min-width:58px;
  color:#071b30;
  background:#fff;
  font-variant-numeric:tabular-nums;
}

.cn-proposal-mode-switch{
  display:flex;
  flex:0 0 auto;
  padding:3px;
  border:1px solid #526a82;
  border-radius:10px;
  background:#0d2942;
}

.cn-proposal-mode-switch .btn{
  min-height:34px;
  border:0;
  background:transparent;
}

.cn-proposal-mode-switch .btn.active{
  color:#071b30;
  background:#fff;
}

.cn-live-proposal-notice{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:8px 18px;
  border-bottom:1px solid #cbd8e6;
  color:#445a70;
  background:#fff;
  font-size:12px;
}

.cn-live-proposal-notice strong{
  flex:0 0 auto;
  color:#0d4b72;
}

.cn-live-proposal-body{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  overflow:hidden;
}

.cn-live-proposal.cn-proposal-editing .cn-live-proposal-body{
  grid-template-columns:minmax(360px,440px) minmax(0,1fr);
}

.cn-live-proposal-editor[hidden]{display:none!important}

.cn-live-proposal-editor{
  position:relative;
  align-self:stretch;
  height:auto;
  min-width:0;
  min-height:0;
  display:block;
  overflow:hidden;
  border-right:1px solid #cbd8e6;
  background:#f4f7fa;
}

#cnLiveProposalEditorContent{
  position:absolute;
  inset:0;
  height:auto;
  min-height:0;
  display:block;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-padding-block:112px 88px;
  scrollbar-gutter:stable;
  scrollbar-color:#6b8297 #e6edf3;
  scrollbar-width:auto;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}

#cnLiveProposalEditorContent::-webkit-scrollbar{width:12px}
#cnLiveProposalEditorContent::-webkit-scrollbar-track{background:#e6edf3}
#cnLiveProposalEditorContent::-webkit-scrollbar-thumb{
  border:3px solid #e6edf3;
  border-radius:999px;
  background:#6b8297;
}

.cn-proposal-editor-head{
  position:sticky;
  top:0;
  z-index:5;
  display:grid;
  gap:10px;
  padding:13px 15px;
  border-bottom:1px solid #d5dfe8;
  background:#fff;
  box-shadow:0 2px 7px rgba(18,46,72,.08);
}

.cn-proposal-editor-title{
  display:grid;
  gap:3px;
}

.cn-proposal-editor-head strong{color:#0b2742;font-size:15px}
.cn-proposal-editor-head small{color:#64788d;font-size:11px}

.cn-proposal-editor-jumps{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.cn-proposal-editor-jumps .btn{
  min-height:32px;
  padding:6px 9px;
  border-color:#aac0d4;
  color:#123d60;
  background:#edf5fb;
  font-size:10px;
  font-weight:850;
}

.cn-proposal-editor-jumps .btn:hover{
  border-color:#2476b8;
  background:#d9ecfa;
}

.cn-proposal-editor-fields{
  padding:12px;
  overflow:visible;
}

.cn-proposal-edit-section{
  display:grid;
  gap:11px;
  margin:0 0 12px;
  padding:13px;
  border:1px solid #d7e1eb;
  border-radius:12px;
  background:#fff;
}

.cn-proposal-edit-section h3{
  margin:0;
  color:#0b2742;
  font-size:14px;
}

.cn-proposal-edit-section label{
  display:grid;
  gap:5px;
  color:#4c6277;
  font-size:11px;
  font-weight:800;
}

.cn-proposal-edit-section input,
.cn-proposal-edit-section textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #bdcad7;
  border-radius:8px;
  padding:9px 10px;
  color:#112d47;
  background:#fff;
  font:inherit;
  font-size:12px;
  font-weight:500;
  line-height:1.45;
  resize:vertical;
  overflow-y:hidden;
}

.cn-proposal-edit-section input:focus,
.cn-proposal-edit-section textarea:focus{
  outline:3px solid rgba(37,118,184,.16);
  border-color:#2476b8;
}

.cn-proposal-field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.cn-proposal-section-title,
.cn-proposal-line-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.cn-proposal-section-title span,
.cn-proposal-line-heading span{
  color:#6d8092;
  font-size:10px;
}

.cn-proposal-edit-hint{
  margin:0;
  color:#6d8092;
  font-size:11px;
  line-height:1.4;
}

.cn-proposal-line-list{display:grid;gap:10px}

.cn-proposal-line-editor{
  display:grid;
  gap:9px;
  padding:11px;
  border:1px solid #dbe4ec;
  border-radius:9px;
  background:#f8fafc;
}

.cn-proposal-line-heading strong{
  color:#173b59;
  font-size:11px;
}

.cn-proposal-empty{
  padding:18px 10px;
  color:#6d8092;
  text-align:center;
  font-size:12px;
}

.cn-proposal-editor-foot{
  position:sticky;
  bottom:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid #d5dfe8;
  background:#fff;
  box-shadow:0 -2px 7px rgba(18,46,72,.08);
}

.cn-proposal-editor-foot>span{
  color:#64788d;
  font-size:11px;
  font-weight:800;
}

.cn-proposal-editor-foot>div{display:flex;gap:7px}
.cn-proposal-editor-foot .btn:disabled{cursor:not-allowed;opacity:.48}
.cn-proposal-dirty .cn-proposal-editor-foot>span{color:#9a5b05}

#cnProposalWritingHost{margin-top:12px}

.cn-live-proposal-stage{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#dfe7ef;
}

.cn-live-proposal-zoom-surface{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0 auto;
}

.cn-live-proposal-stage iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
  opacity:0;
  background:#e9edf0;
  transform:scale(var(--cn-proposal-preview-zoom,1));
  transform-origin:top left;
  transition:opacity .16s ease,transform .12s ease;
}

.cn-live-proposal-stage iframe.ready{opacity:1}

.cn-proposal-fullscreen .cn-live-proposal-stage{
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
  scrollbar-color:#6b8297 #dfe7ef;
  touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;
}

.cn-live-proposal-loading{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  color:#52677c;
  background:#eef3f8;
  font-size:14px;
  font-weight:700;
}

.cn-live-proposal-loading[hidden]{display:none}

@media(max-width:980px){
  .cn-live-proposal{
    padding:0;
    pointer-events:auto;
    background:rgba(3,18,33,.76);
    backdrop-filter:blur(5px);
  }
  .cn-live-proposal-shell{width:100%;border:0;border-radius:0}
  .cn-live-proposal-head{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .cn-live-proposal-status{display:none}
  .cn-live-proposal-actions{grid-column:1/-1}
  .cn-live-proposal.cn-proposal-editing .cn-live-proposal-body{
    grid-template-columns:minmax(320px,42vw) minmax(0,1fr);
  }
}

@media(max-width:700px){
  .cn-live-proposal-head{padding:10px}
  .cn-live-proposal-heading strong{font-size:16px}
  .cn-live-proposal-heading small{font-size:11px}
  .cn-live-proposal-notice{align-items:flex-start;padding:8px 10px}
  .cn-live-proposal-notice span{line-height:1.3}
  .cn-live-proposal-actions{gap:5px}
  .cn-live-proposal-actions .btn{min-width:max-content;padding:8px 9px;font-size:11px}
  .cn-live-proposal.cn-proposal-editing .cn-live-proposal-body{
    display:block;
    overflow:hidden;
  }
  .cn-live-proposal.cn-proposal-editing .cn-live-proposal-editor{
    width:100%;
    height:100%;
    border-right:0;
    border-bottom:1px solid #cbd8e6;
  }
  .cn-live-proposal.cn-proposal-editing .cn-live-proposal-stage{display:none}
  .cn-proposal-field-grid{grid-template-columns:1fr}
  .cn-proposal-editor-foot{align-items:stretch;flex-direction:column}
  .cn-proposal-editor-foot>div{display:grid;grid-template-columns:1fr 1fr}
}