/* SERVE_DOCUMENT_STUDIO_CSS_20261002 */


.serve-doc-overlay{
 position:fixed;
 inset:0;

 z-index:12000;

 display:none;
 align-items:center;
 justify-content:center;

 padding:24px;

 box-sizing:border-box;

 background:
  rgba(17,17,20,.30);

 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
}


.serve-doc-overlay.open{
 display:flex;
}


.serve-doc-modal{
 width:min(
  1180px,
  calc(100vw - 48px)
 );

 max-height:
  calc(100dvh - 48px);

 display:flex;
 flex-direction:column;

 overflow:hidden;

 border:
  1px solid #e1e1e6;

 border-radius:24px;

 background:#fff;

 box-shadow:
  0 24px 70px
  rgba(0,0,0,.16);
}


.serve-doc-small-modal{
 width:min(
  680px,
  calc(100vw - 48px)
 );
}


.serve-doc-modal-head{
 min-height:82px;

 display:flex;
 align-items:center;
 justify-content:space-between;

 gap:20px;

 padding:
  18px 22px;

 box-sizing:border-box;

 border-bottom:
  1px solid #ededf0;
}


.serve-doc-modal-head > div:first-child{
 min-width:0;
}


.serve-doc-modal-head span{
 display:block;

 color:#929298;

 font-size:9px;
 font-weight:800;
 letter-spacing:.08em;
}


.serve-doc-modal-head h3{
 margin:4px 0 0;

 color:#111;

 font-size:22px;
 line-height:1.05;
}


.serve-doc-head-actions{
 display:flex;
 align-items:center;

 gap:8px;
}


.serve-doc-primary,
.serve-doc-secondary,
.serve-doc-close{
 min-height:38px;

 padding:
  0 14px;

 border:
  1px solid #dedee3;

 border-radius:11px;

 background:#fff;

 color:#111;

 font:inherit;
 font-size:10px;
 font-weight:750;

 cursor:pointer;
}


.serve-doc-primary{
 border-color:#111;

 background:#111;
 color:#fff;
}


.serve-doc-primary.danger{
 border-color:#b3261e;

 background:#b3261e;
}


.serve-doc-secondary.danger{
 color:#b3261e;
}


.serve-doc-close{
 width:44px;
 height:44px;

 padding:0;

 border:0;

 border-radius:50%;

 background:#f4f4f6;

 font-size:24px;
 line-height:1;
}


.serve-doc-close:hover,
.serve-doc-secondary:hover{
 background:#f5f5f7;
}




/* ============================================================
   SETTINGS – DOCUMENT STUDIO V2
   ============================================================ */

.serve-doc-settings-card{
 grid-column:
  1 / -1;

 width:100%;

 margin-top:12px !important;

 padding:18px !important;

 box-sizing:border-box;
}


.serve-doc-settings-head{
 display:flex;

 align-items:center;
 justify-content:space-between;

 gap:18px;
}


.serve-doc-settings-title{
 min-width:0;
}


.serve-doc-settings-title h2{
 margin:0;

 color:#111;

 font-size:16px;
 line-height:1.1;
}


.serve-doc-settings-title p{
 margin:
  4px 0 0;

 color:#85858b;

 font-size:9px;
 line-height:1.4;
}


.serve-doc-settings-options{
 display:grid;

 grid-template-columns:
  repeat(
   2,
   minmax(0,1fr)
  );

 gap:10px;

 margin-top:16px;
}


.serve-doc-settings-option{
 min-width:0;
 min-height:72px;

 display:grid;

 grid-template-columns:
  40px
  minmax(0,1fr)
  20px;

 align-items:center;

 gap:11px;

 padding:
  11px 12px;

 box-sizing:border-box;

 border:
  1px solid #e1e1e5;

 border-radius:13px;

 background:#fff;

 color:#111;

 font:inherit;

 text-align:left;

 cursor:pointer;

 transition:
  background .14s ease,
  border-color .14s ease,
  transform .14s ease;
}


.serve-doc-settings-option:hover{
 border-color:#d4d4d9;

 background:#f8f8fa;
}


.serve-doc-settings-option:active{
 transform:
  scale(.995);
}


.serve-doc-settings-option-icon{
 width:36px;
 height:36px;

 display:grid;
 place-items:center;

 border-radius:10px;

 background:#f3f3f5;

 color:#111;

 font-size:16px;
 font-weight:800;
}


.serve-doc-settings-option-copy{
 min-width:0;
}


.serve-doc-settings-option-copy strong{
 display:block;

 color:#111;

 font-size:10px;
 font-weight:800;
}


.serve-doc-settings-option-copy span{
 display:block;

 margin-top:3px;

 overflow:hidden;

 color:#85858b;

 font-size:8px;
 line-height:1.35;

 text-overflow:ellipsis;
 white-space:nowrap;
}


.serve-doc-settings-option-arrow{
 color:#aaaab0;

 font-size:21px;
 font-weight:400;

 text-align:center;
}


@media(max-width:760px){

 .serve-doc-settings-options{
  grid-template-columns:1fr;
 }


 .serve-doc-settings-head{
  align-items:flex-start;
 }


 .serve-doc-settings-option-copy span{
  white-space:normal;
 }

}


/* ============================================================
   TEXT / MARKDOWN EDITOR
   ============================================================ */

.serve-doc-editor-modal{
 height:
  min(
   760px,
   calc(100dvh - 48px)
  );
}


.serve-doc-autosave{
 white-space:nowrap;

 color:#929298 !important;

 font-size:8px !important;
 font-weight:600 !important;
 letter-spacing:0 !important;
}


.serve-doc-editor-name{
 padding:
  12px 18px;

 border-bottom:
  1px solid #ededf0;
}


.serve-doc-editor-name input{
 width:100%;
 height:40px;

 padding:
  0 12px;

 box-sizing:border-box;

 border:
  1px solid #dedee3;

 border-radius:10px;

 background:#f8f8fa;

 font:inherit;
 font-size:11px;
 font-weight:700;
}


.serve-doc-editor-grid{
 flex:1 1 auto;

 min-height:0;

 display:grid;

 grid-template-columns:
  1fr 1fr;
}


#serveDocEditorText{
 min-width:0;

 padding:24px;

 resize:none;

 border:0;
 border-right:
  1px solid #ededf0;

 outline:none;

 color:#222;

 font:
  13px/1.6
  ui-monospace,
  SFMono-Regular,
  Menlo,
  Monaco,
  Consolas,
  monospace;
}


.serve-doc-editor-preview{
 overflow:auto;

 padding:28px;

 color:#222;

 font-size:12px;
 line-height:1.6;
}


.serve-doc-editor-preview pre{
 margin:0;

 white-space:pre-wrap;

 font:
  12px/1.6
  ui-monospace,
  SFMono-Regular,
  Menlo,
  Monaco,
  Consolas,
  monospace;
}


.serve-doc-editor-preview h1{
 font-size:26px;
}


.serve-doc-editor-preview h2{
 font-size:21px;
}


.serve-doc-editor-preview h3{
 font-size:17px;
}


/* ============================================================
   COMMON FIELDS
   ============================================================ */

.serve-doc-field{
 display:flex;
 flex-direction:column;

 gap:6px;

 min-width:0;
}


.serve-doc-field > span{
 color:#77777d;

 font-size:8px;
 font-weight:800;
}


.serve-doc-field input,
.serve-doc-field select,
.serve-doc-field textarea{
 width:100%;

 min-height:40px;

 padding:
  9px 11px;

 box-sizing:border-box;

 border:
  1px solid #dedee3;

 border-radius:10px;

 background:#f8f8fa;

 color:#111;

 font:inherit;
 font-size:10px;

 outline:none;
}


.serve-doc-field textarea{
 min-height:88px;

 resize:vertical;
}


.serve-doc-field input:focus,
.serve-doc-field select:focus,
.serve-doc-field textarea:focus{
 border-color:#111;

 background:#fff;
}


.serve-doc-check{
 display:flex;
 align-items:center;

 gap:8px;

 min-height:36px;

 font-size:10px;
}


/* ============================================================
   TEMPLATE LIST
   ============================================================ */

.serve-template-list,
.serve-trash-list,
.serve-template-choice-list{
 overflow:auto;

 padding:18px;
}


.serve-template-row,
.serve-trash-row{
 display:flex;
 align-items:center;

 gap:14px;

 min-height:70px;

 padding:
  12px 14px;

 box-sizing:border-box;

 border:
  1px solid #ededf0;

 border-radius:14px;

 background:#fff;
}


.serve-template-row
+.serve-template-row,
.serve-trash-row
+.serve-trash-row{
 margin-top:8px;
}


.serve-template-row-main,
.serve-trash-copy{
 min-width:0;

 flex:1 1 auto;
}


.serve-template-row-main strong,
.serve-trash-copy strong{
 display:block;

 overflow:hidden;

 color:#111;

 font-size:11px;

 text-overflow:ellipsis;
 white-space:nowrap;
}


.serve-template-row-main span,
.serve-trash-copy span{
 display:block;

 margin-top:4px;

 color:#929298;

 font-size:8px;
}


.serve-template-row-main p{
 margin:
  5px 0 0;

 color:#66666c;

 font-size:9px;
}


.serve-template-row-actions,
.serve-trash-actions{
 display:flex;

 gap:6px;
}


.serve-template-row-actions button,
.serve-trash-actions button{
 min-height:34px;

 padding:
  0 10px;

 border:
  1px solid #dedee3;

 border-radius:9px;

 background:#fff;

 color:#111;

 font:inherit;
 font-size:8px;
 font-weight:750;

 cursor:pointer;
}


.serve-template-row-actions button.danger,
.serve-trash-actions button.danger{
 color:#b3261e;
}


/* ============================================================
   BUILDER
   ============================================================ */

.serve-builder-modal{
 width:
  min(
   1420px,
   calc(100vw - 36px)
  );

 height:
  min(
   860px,
   calc(100dvh - 36px)
  );
}


.serve-builder-meta{
 display:grid;

 grid-template-columns:
  1fr 1.4fr 180px;

 gap:10px;

 padding:
  14px 18px;

 border-bottom:
  1px solid #ededf0;

 background:#fafafa;
}


.serve-builder-layout{
 flex:1 1 auto;

 min-height:0;

 display:grid;

 grid-template-columns:
  190px
  minmax(360px,1fr)
  360px;
}


.serve-builder-palette,
.serve-builder-side{
 overflow:auto;

 padding:16px;

 background:#fafafa;
}


.serve-builder-palette{
 border-right:
  1px solid #ededf0;
}


.serve-builder-side{
 border-left:
  1px solid #ededf0;
}


.serve-builder-section-label{
 display:block;

 margin-bottom:10px;

 color:#929298;

 font-size:8px;
 font-weight:850;
 letter-spacing:.08em;
}


#serveBuilderPalette{
 display:grid;

 gap:6px;
}


#serveBuilderPalette button{
 min-height:38px;

 padding:
  0 11px;

 border:
  1px solid #dedee3;

 border-radius:10px;

 background:#fff;

 color:#111;

 font:inherit;
 font-size:9px;
 font-weight:700;

 text-align:left;

 cursor:grab;
}


.serve-builder-work{
 overflow:auto;

 padding:20px;

 background:#fff;
}


.serve-builder-canvas{
 min-height:100%;

 padding-bottom:80px;
}


.serve-builder-block{
 min-height:64px;

 display:flex;
 align-items:center;

 gap:10px;

 padding:
  10px;

 margin-bottom:8px;

 box-sizing:border-box;

 border:
  1px solid #e1e1e5;

 border-radius:13px;

 background:#fff;
}


.serve-builder-block.active{
 border-color:#9eb8e9;

 background:#f2f6ff;
}


.serve-builder-drag{
 width:30px;

 border:0;

 background:transparent;

 color:#aaaab0;

 cursor:grab;
}


.serve-builder-block-copy{
 min-width:0;

 flex:1 1 auto;

 cursor:pointer;
}


.serve-builder-block-copy strong{
 display:block;

 font-size:10px;
}


.serve-builder-block-copy span{
 display:block;

 overflow:hidden;

 margin-top:3px;

 color:#85858b;

 font-size:8px;

 text-overflow:ellipsis;
 white-space:nowrap;
}


.serve-builder-block-actions{
 display:flex;
 gap:3px;
}


.serve-builder-block-actions button{
 width:28px;
 height:28px;

 border:
  1px solid #dedee3;

 border-radius:8px;

 background:#fff;

 cursor:pointer;
}


.serve-builder-block-actions button.danger{
 color:#b3261e;
}


.serve-builder-drop-empty{
 min-height:220px;

 display:grid;
 place-items:center;

 border:
  1px dashed #d3d3d8;

 border-radius:16px;

 color:#929298;

 font-size:10px;
}


.serve-builder-properties{
 display:grid;

 gap:12px;
}


.serve-builder-prop-head span{
 color:#929298;

 font-size:8px;
 font-weight:850;
}


.serve-builder-prop-head strong{
 display:block;

 margin-top:3px;

 font-size:13px;
}


.serve-builder-preview-wrap{
 margin-top:22px;

 padding-top:18px;

 border-top:
  1px solid #ededf0;
}


.serve-builder-preview,
.serve-template-use-preview{
 padding:18px;

 border:
  1px solid #ededf0;

 border-radius:14px;

 background:#fff;
}


/* ============================================================
   DOCUMENT PREVIEW
   ============================================================ */

.serve-builder-preview h1,
.serve-template-use-preview h1{
 margin:
  0 0 14px;

 font-size:23px;
}


.serve-builder-preview h2,
.serve-template-use-preview h2{
 margin:
  0 0 12px;

 font-size:18px;
}


.serve-builder-preview h3,
.serve-template-use-preview h3{
 margin:
  0 0 10px;

 font-size:15px;
}


.serve-builder-preview p,
.serve-template-use-preview p{
 color:#44444a;

 font-size:10px;
 line-height:1.55;
}


.serve-doc-preview-field{
 display:flex;
 align-items:center;
 justify-content:space-between;

 gap:16px;

 min-height:40px;

 border-bottom:
  1px solid #ededf0;

 font-size:9px;
}


.serve-doc-preview-field span{
 color:#929298;
}


.serve-doc-preview-check{
 padding:
  8px 0;

 font-size:10px;
}


.serve-doc-preview-notice{
 display:flex;
 flex-direction:column;

 gap:4px;

 padding:12px;

 margin:
  10px 0;

 border-radius:10px;

 background:#f5f5f7;

 font-size:9px;
}


.serve-doc-preview-table{
 margin:
  12px 0;
}


.serve-doc-preview-table > div{
 display:grid;

 grid-auto-flow:column;
 grid-auto-columns:1fr;

 margin-top:6px;

 border:
  1px solid #ededf0;
}


.serve-doc-preview-table > div span{
 padding:7px;

 border-right:
  1px solid #ededf0;

 font-size:8px;
}


.serve-doc-preview-image{
 display:block;

 max-width:100%;
 max-height:180px;

 margin:
  12px auto;

 object-fit:contain;
}


.serve-doc-preview-image-placeholder{
 display:grid;
 place-items:center;

 min-height:100px;

 border:
  1px dashed #d8d8dd;

 border-radius:12px;

 color:#929298;

 font-size:9px;
}


/* ============================================================
   TEMPLATE USE
   ============================================================ */

.serve-template-use-modal{
 width:
  min(
   1120px,
   calc(100vw - 48px)
  );

 height:
  min(
   780px,
   calc(100dvh - 48px)
  );
}


.serve-template-use-name{
 padding:
  12px 18px;

 border-bottom:
  1px solid #ededf0;
}


.serve-template-use-grid{
 flex:1 1 auto;

 min-height:0;

 display:grid;

 grid-template-columns:
  1fr 1fr;
}


.serve-template-use-fields,
.serve-template-use-preview{
 overflow:auto;

 padding:20px;
}


.serve-template-use-fields{
 display:flex;
 flex-direction:column;

 gap:12px;

 border-right:
  1px solid #ededf0;
}


.serve-use-static{
 padding:
  8px 0;

 font-size:10px;
}


/* ============================================================
   CHOOSER
   ============================================================ */

.serve-template-choice-list{
 display:grid;

 gap:8px;
}


.serve-template-choice{
 width:100%;

 padding:14px;

 border:
  1px solid #dedee3;

 border-radius:13px;

 background:#fff;

 text-align:left;

 cursor:pointer;
}


.serve-template-choice:hover{
 background:#f7f7f9;
}


.serve-template-choice strong{
 display:block;

 color:#111;

 font-size:11px;
}


.serve-template-choice span{
 display:block;

 margin-top:4px;

 color:#929298;

 font-size:8px;
}


.serve-template-choice p{
 margin:
  6px 0 0;

 color:#66666c;

 font-size:9px;
}


/* ============================================================
   TRASH
   ============================================================ */

.serve-trash-icon{
 width:40px;
 height:40px;

 display:grid;
 place-items:center;

 flex:0 0 auto;

 border-radius:10px;

 background:#f5f5f7;

 color:#55555b;
}


/* ============================================================
   CONFIRM
   ============================================================ */

.serve-doc-confirm{
 width:
  min(
   420px,
   calc(100vw - 40px)
  );

 padding:22px;

 border-radius:20px;

 background:#fff;

 box-shadow:
  0 24px 70px
  rgba(0,0,0,.18);
}


.serve-doc-confirm h3{
 margin:0;

 font-size:18px;
}


.serve-doc-confirm p{
 margin:
  10px 0 20px;

 color:#66666c;

 font-size:10px;
 line-height:1.5;
}


.serve-doc-confirm-actions{
 display:flex;
 justify-content:flex-end;

 gap:8px;
}


/* ============================================================
   NEW CONTEXT MENU
   ============================================================ */

.serve-doc-new-menu{
 position:fixed;

 z-index:12500;

 width:200px;

 padding:6px;

 box-sizing:border-box;

 border:
  1px solid #dfdfe4;

 border-radius:12px;

 background:#fff;

 box-shadow:
  0 14px 38px
  rgba(0,0,0,.15);
}


.serve-doc-new-menu[hidden]{
 display:none !important;
}


.serve-doc-new-menu > span{
 display:block;

 padding:
  7px 10px 5px;

 color:#929298;

 font-size:8px;
 font-weight:850;
 letter-spacing:.08em;
}


.serve-doc-new-menu button{
 width:100%;
 min-height:35px;

 padding:
  0 10px;

 border:0;
 border-radius:8px;

 background:transparent;

 color:#111;

 font:inherit;
 font-size:9px;
 font-weight:700;

 text-align:left;

 cursor:pointer;
}


.serve-doc-new-menu button:hover{
 background:#f3f3f5;
}


.serve-doc-menu-separator{
 height:1px;

 margin:5px;

 background:#ededf0;
}


/* ============================================================
   EMPTY / TOAST
   ============================================================ */

.serve-doc-empty{
 min-height:180px;

 display:flex;
 align-items:center;
 justify-content:center;
 flex-direction:column;

 gap:6px;

 color:#929298;

 text-align:center;
}


.serve-doc-empty.compact{
 min-height:90px;
}


.serve-doc-empty strong{
 color:#111;

 font-size:12px;
}


.serve-doc-empty span{
 font-size:9px;
}


.serve-doc-toast{
 position:fixed;

 left:50%;
 bottom:28px;

 z-index:13000;

 transform:
  translate(
   -50%,
   12px
  );

 opacity:0;

 pointer-events:none;

 padding:
  10px 14px;

 border-radius:10px;

 background:#111;

 color:#fff;

 font-size:9px;
 font-weight:700;

 transition:
  opacity .16s ease,
  transform .16s ease;
}


.serve-doc-toast.show{
 transform:
  translate(
   -50%,
   0
  );

 opacity:1;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:900px){

 .serve-doc-overlay{
  padding:10px;
 }


 .serve-doc-modal{
  width:
   calc(100vw - 20px);

  max-height:
   calc(100dvh - 20px);

  border-radius:18px;
 }


 .serve-builder-modal{
  height:
   calc(100dvh - 20px);
 }


 .serve-builder-meta{
  grid-template-columns:1fr;
 }


 .serve-builder-layout{
  grid-template-columns:
   150px minmax(0,1fr);
 }


 .serve-builder-side{
  display:none;
 }


 .serve-doc-editor-grid,
 .serve-template-use-grid{
  grid-template-columns:1fr;
 }


 .serve-doc-editor-preview,
 .serve-template-use-preview{
  display:none;
 }


 .serve-template-use-fields,
 #serveDocEditorText{
  border-right:0;
 }


 .serve-doc-settings-grid{
  grid-template-columns:1fr;
 }


 .serve-doc-settings-head{
  align-items:flex-start;
  flex-direction:column;
 }

}