/* Spocale Mail Builder v1.31 UI system — presentation layer only */
:root{
  --ui-bg:#f5f7fb;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fafc;
  --ui-surface-blue:#f4f7ff;
  --ui-text:#172033;
  --ui-muted:#68758a;
  --ui-faint:#94a3b8;
  --ui-border:#dfe5ee;
  --ui-border-strong:#cbd5e1;
  --ui-primary:#2563eb;
  --ui-primary-hover:#1d4ed8;
  --ui-primary-soft:#edf3ff;
  --ui-success:#16803c;
  --ui-success-soft:#edf9f0;
  --ui-warning:#b7791f;
  --ui-warning-soft:#fff8e6;
  --ui-danger:#d33a32;
  --ui-danger-soft:#fff1f0;
  --ui-header:#111c2d;
  --ui-radius-sm:8px;
  --ui-radius:12px;
  --ui-radius-lg:18px;
  --ui-shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --ui-shadow-sm:0 4px 14px rgba(15,23,42,.06);
  --ui-shadow-md:0 16px 44px rgba(15,23,42,.12);
  --ui-focus:0 0 0 3px rgba(37,99,235,.14);
}
html{background:var(--ui-bg);color-scheme:light}
body{background:var(--ui-bg)!important;color:var(--ui-text)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body,button,input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"Inter","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}

/* Header / global navigation */
header{min-height:64px!important;height:auto!important;background:rgba(17,28,45,.98)!important;color:#fff!important;padding:10px 22px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;box-shadow:0 4px 18px rgba(15,23,42,.16)!important;position:relative;z-index:60}
header .brand,header>span:first-child{font-weight:800!important;letter-spacing:-.015em!important;font-size:15px!important}
header small,header>span:first-child span{font-weight:600!important;color:#91a0b7!important;opacity:1!important}
.header-user,.header-right,.header-actions,.actions{gap:8px!important;align-items:center!important}
.header-nav-link,header .btn,header .ghost{min-height:38px!important;padding:8px 12px!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.045)!important;color:#eaf0f8!important;border-radius:9px!important;font-weight:700!important;font-size:12px!important;box-shadow:none!important;text-decoration:none!important;transition:.16s ease!important}
.header-nav-link:hover,header .btn:hover,header .ghost:hover{background:rgba(255,255,255,.11)!important;border-color:rgba(255,255,255,.23)!important;transform:translateY(-1px)}
.header-nav-active{background:#fff!important;color:var(--ui-header)!important;border-color:#fff!important}
.header-user-pill,.user-pill{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:999px!important;padding:7px 11px!important;color:#fff!important}

/* Page shell */
main{max-width:1480px;margin:0 auto!important;padding:28px 28px 96px!important}
h1,h2,h3{color:var(--ui-text);letter-spacing:-.025em}
h1{font-size:28px!important;line-height:1.3!important;font-weight:800!important;margin-top:0}
h2{font-weight:800!important}.lead,.muted,.small,.help,.sub,.meta{color:var(--ui-muted)!important}
.eyebrow{color:var(--ui-primary)!important;font-weight:800!important;letter-spacing:.02em!important}
.page-head,.head{align-items:center!important;gap:18px!important}

/* Surfaces */
.card,.panel,.setup-summary .summary-card,.style-box,.design-help-card,.notice,.section,.settings-card{border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-lg)!important;background:var(--ui-surface)!important;box-shadow:var(--ui-shadow-xs)!important}
.card,.panel,.style-box{padding:22px!important}
.notice{background:var(--ui-surface-blue)!important;border-color:#dce6ff!important;color:#42516a!important;padding:15px 17px!important}
hr{border:0;border-top:1px solid var(--ui-border)}

/* Buttons */
.btn,button:not(.color-swatch):not([class*="swatch"]){border-radius:9px!important;min-height:40px;border:1px solid var(--ui-border-strong);background:#fff;color:var(--ui-text);font-weight:750;box-shadow:var(--ui-shadow-xs);transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
.btn:hover,button:not(.color-swatch):not([class*="swatch"]):hover{border-color:#b9c5d4;box-shadow:var(--ui-shadow-sm);transform:translateY(-1px)}
.btn.primary,.primary{background:var(--ui-primary)!important;border-color:var(--ui-primary)!important;color:#fff!important;box-shadow:0 5px 14px rgba(37,99,235,.22)!important}
.btn.primary:hover,.primary:hover{background:var(--ui-primary-hover)!important;border-color:var(--ui-primary-hover)!important}
.btn.danger,.danger,.delete,.danger-btn{background:var(--ui-danger-soft)!important;border-color:#ffd5d2!important;color:var(--ui-danger)!important;box-shadow:none!important}
.secondary{background:#f3f6fa!important;color:#334155!important;border-color:var(--ui-border)!important}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:none!important;box-shadow:var(--ui-focus)!important}

/* Forms */
.field{gap:7px!important}.field label,label{color:#3c4759;font-weight:750!important;font-size:13px!important}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea,[contenteditable="true"]{border:1px solid var(--ui-border-strong)!important;border-radius:10px!important;background:#fff!important;color:var(--ui-text)!important;box-shadow:inset 0 1px 2px rgba(15,23,42,.025)!important;transition:border-color .15s,box-shadow .15s,background .15s!important}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select{min-height:44px!important;padding:9px 12px!important}
textarea{padding:12px 13px!important;line-height:1.6!important}
input:focus,select:focus,textarea:focus,[contenteditable="true"]:focus{outline:none!important;border-color:#6f9df4!important;box-shadow:var(--ui-focus)!important}
input::placeholder,textarea::placeholder{color:#a5afbf!important}
input[type="checkbox"],input[type="radio"]{accent-color:var(--ui-primary)}

/* Tables */
table{border-color:var(--ui-border)!important}th{background:#f8fafc!important;color:#536176!important;font-size:12px!important;text-transform:none;letter-spacing:.01em;font-weight:800!important}th,td{border-color:var(--ui-border)!important;padding-top:13px!important;padding-bottom:13px!important}tbody tr:hover>td{background:#fbfcfe}
.table-wrap{border:1px solid var(--ui-border)!important;border-radius:14px!important;overflow:hidden;background:#fff}

/* Chips / badges */
.badge,.setup-chip,.ready-badge,.setup-badge{border-radius:999px!important;font-weight:800!important;border-width:1px!important;box-shadow:none!important}
.badge.enabled,.ready-badge,.ok{background:var(--ui-success-soft)!important;color:var(--ui-success)!important}.badge.disabled{background:#f1f5f9!important;color:#64748b!important}
.err{color:var(--ui-danger)!important}.warn{color:var(--ui-warning)!important}

/* Modal */
.modal{background:rgba(15,23,42,.58)!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:28px!important}
.modal-card{border:1px solid rgba(255,255,255,.5)!important;border-radius:20px!important;background:#fff!important;box-shadow:var(--ui-shadow-md)!important;padding:24px!important}
.modal-head{padding-bottom:16px!important;border-bottom:1px solid var(--ui-border)!important;margin-bottom:18px!important}

/* Editor-specific refinement */
.app,.workspace,.editor-wrap{background:var(--ui-bg)!important}
.editor,.preview,.editor-panel,.preview-panel{border-color:var(--ui-border)!important;box-shadow:var(--ui-shadow-xs)!important}
.tabs,.editor-tabs{background:#f8fafc!important;border-color:var(--ui-border)!important}
.tab{transition:.15s ease}.tab.active,.tab.is-active{color:var(--ui-primary)!important;border-color:var(--ui-primary)!important;background:#fff!important}
.module,.module-card,.section-card{background:#fff!important;border-color:var(--ui-border)!important;border-radius:13px!important;box-shadow:var(--ui-shadow-xs)!important}
.module:hover,.module-card:hover,.section-card:hover{border-color:#c8d3e1!important}
.module-head,.module-header{background:#fbfcfe!important;border-color:var(--ui-border)!important}
.toolbar{gap:9px!important}.toolbar button{box-shadow:none!important}
.preview{background:#eef2f7!important}
.preview iframe{border-radius:10px!important;box-shadow:0 3px 18px rgba(15,23,42,.08)!important;background:#fff}

/* Fixed action bar */
.fixed-actions,.bottom-bar,.sticky-footer,.editor-footer{background:rgba(255,255,255,.93)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--ui-border)!important;box-shadow:0 -8px 24px rgba(15,23,42,.07)!important}

/* Project cards */
.projects{gap:18px!important}.projects .card{transition:transform .18s,box-shadow .18s,border-color .18s!important}.projects .card:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-sm)!important;border-color:#c9d5e5!important}.project-id{background:var(--ui-primary-soft)!important;color:var(--ui-primary)!important;border-radius:999px!important;padding:4px 9px!important;font-weight:800!important}

/* Summary cards */
.setup-summary{gap:14px!important}.summary-card{padding:18px!important}.summary-label{color:var(--ui-muted)!important;font-weight:700!important}.summary-value{font-size:27px!important;color:var(--ui-text)!important;font-weight:850!important}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:#c3ccda transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#c3ccda;border:3px solid transparent;background-clip:padding-box;border-radius:999px}::-webkit-scrollbar-track{background:transparent}

@media(max-width:1100px){header{padding:10px 14px!important}.header-user,.header-right,.header-actions,.actions{flex-wrap:wrap!important}main{padding:22px 18px 90px!important}}
@media(max-width:760px){main{padding:18px 12px 88px!important}header{position:relative!important}.modal{padding:10px!important}.modal-card{padding:17px!important;border-radius:16px!important}.card,.panel,.style-box{padding:16px!important}.btn,button{min-height:42px}}

/* v1.31.3 editor layout safety
   Keep the tab switcher in normal document flow and reserve sticky behavior
   for the content module toolbar only. This prevents both elements competing
   for top:0 and overlapping each other. */
.editor-main-panel .editor-tabbed{
  overflow:visible!important;
  position:relative!important;
}
.editor-main-panel .editor-tabs{
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  margin-bottom:18px!important;
}
.editor-main-panel .editor-tab-panel{
  position:relative!important;
  z-index:1!important;
  min-width:0!important;
}
.editor-main-panel .editor-tab-panel[data-editor-panel="content"] .module-toolbar-sticky{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  margin-top:0!important;
  margin-bottom:14px!important;
  padding:10px 0 9px!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.editor-main-panel #modules{
  position:relative!important;
  z-index:1!important;
}
.editor-main-panel .module,
.editor-main-panel .module-card,
.editor-main-panel .section-card{
  position:relative;
  z-index:1;
}
.preview-panel{
  isolation:isolate;
}
@media(max-width:900px){
  .editor-main-panel .editor-tab-panel[data-editor-panel="content"] .module-toolbar-sticky{
    position:relative!important;
    top:auto!important;
  }
}

/* v1.31.4 — mail editor usability layer
   The mail editor is intentionally denser than the admin screens.
   Keep the editing canvas large and make repetitive controls compact. */
.editor-main-panel .editor-tab-panel[data-editor-panel="content"] .module-toolbar-sticky{
  top:0!important;
  z-index:35!important;
  padding:8px 10px 7px!important;
  margin:0 0 12px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:0 0 10px 10px!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 5px 14px rgba(15,23,42,.07)!important;
}
.editor-main-panel .module-toolbar-sticky .toolbar{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:1px 0 3px!important;
  scrollbar-width:thin;
}
.editor-main-panel .module-toolbar-sticky .toolbar button{
  flex:0 0 auto!important;
  min-height:34px!important;
  height:34px!important;
  padding:5px 10px!important;
  border-radius:8px!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:750!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  transform:none!important;
}
.editor-main-panel .module-toolbar-sticky > .small{
  display:block!important;
  margin:4px 0 0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:10px!important;
  line-height:1.35!important;
  color:#7a8799!important;
}

/* Compact, single-line module headers. */
.editor-main-panel #modules{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}
.editor-main-panel #modules .module{
  margin:0!important;
  border-radius:11px!important;
  overflow:visible!important;
}
.editor-main-panel #modules .module-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  min-height:52px!important;
  padding:8px 10px!important;
  border-radius:10px!important;
}
.editor-main-panel #modules .module:not(.collapsed) .module-head{
  border-radius:10px 10px 0 0!important;
}
.editor-main-panel #modules .module-head-title{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-width:0!important;
  overflow:hidden!important;
}
.editor-main-panel #modules .module-head-title strong{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  font-size:14px!important;
  line-height:1.25!important;
}
.editor-main-panel #modules .module-summary{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:11px!important;
  line-height:1.3!important;
  color:#7a8493!important;
}
.editor-main-panel #modules .module-actions{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:5px!important;
  flex:0 0 auto!important;
}
.editor-main-panel #modules .module-grab,
.editor-main-panel #modules .module-toggle,
.editor-main-panel #modules .module-actions button{
  min-width:34px!important;
  width:auto!important;
  height:34px!important;
  min-height:34px!important;
  padding:4px 8px!important;
  border-radius:8px!important;
  font-size:11px!important;
  line-height:1!important;
  box-shadow:none!important;
  transform:none!important;
}
.editor-main-panel #modules .module-grab,
.editor-main-panel #modules .module-toggle,
.editor-main-panel #modules .module-actions button[data-act="up"],
.editor-main-panel #modules .module-actions button[data-act="down"]{
  width:34px!important;
  padding:0!important;
  font-size:15px!important;
}
.editor-main-panel #modules .module-actions button[data-act="copy"]{
  padding-left:9px!important;
  padding-right:9px!important;
}
.editor-main-panel #modules .module-actions button[data-act="delete"]{
  padding-left:9px!important;
  padding-right:9px!important;
}
.editor-main-panel #modules .module-body{
  padding:12px!important;
}

/* Keep the editor tabs clear and compact. */
.editor-main-panel .editor-tabs{
  margin-bottom:12px!important;
  border-radius:10px 10px 0 0!important;
  overflow:hidden!important;
}
.editor-main-panel .editor-tab{
  min-height:58px!important;
  padding:10px 14px!important;
  box-shadow:none!important;
  transform:none!important;
}
.editor-main-panel .editor-tab span{font-size:14px!important}
.editor-main-panel .editor-tab small{font-size:10px!important}

/* Preflight should not visually compete with editing modules. */
.editor-main-panel .preflight-panel{margin-top:14px!important}

@media(max-width:1200px){
  .editor-main-panel #modules .module-summary{display:none!important}
  .editor-main-panel #modules .module-head-title strong{font-size:13px!important}
}
@media(max-width:760px){
  .editor-main-panel .module-toolbar-sticky{
    position:relative!important;
    top:auto!important;
    padding:7px!important;
  }
  .editor-main-panel #modules .module-head{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .editor-main-panel #modules .module-actions{justify-content:flex-end!important}
}

/* v1.31.5 — calm editor scrolling
   Keep only the global header and bottom action bar persistent.
   Everything inside the editor stays in normal document flow so the page
   does not feel like several layers are moving independently. */

/* Global header: stays visible without being removed from document flow. */
body > header{
  position:sticky!important;
  top:0!important;
  z-index:1200!important;
}

/* Mail editor: no secondary sticky surfaces. */
.editor-main-panel .editor-tabs{
  position:relative!important;
  top:auto!important;
  z-index:2!important;
}
.editor-main-panel .editor-tab-panel[data-editor-panel="content"] .module-toolbar-sticky{
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}
.preview-panel{
  position:relative!important;
  top:auto!important;
  align-self:start!important;
  max-height:none!important;
}

/* Reduce visual motion while editing. */
.editor-main-panel .editor-tab-panel{
  animation:none!important;
}
.editor-main-panel .module,
.editor-main-panel .module-card,
.editor-main-panel .section-card,
.editor-main-panel button,
.preview-panel button{
  transform:none!important;
}
.editor-main-panel .module:hover,
.editor-main-panel .module-card:hover,
.editor-main-panel .section-card:hover,
.editor-main-panel button:hover,
.preview-panel button:hover{
  transform:none!important;
}

/* Keep the compact toolbar readable as a normal block. */
.editor-main-panel .module-toolbar-sticky{
  border-radius:10px!important;
  margin-bottom:14px!important;
}

/* On smaller screens the header still stays visible; allow horizontal nav
   instead of making the fixed header grow into several moving rows. */
@media(max-width:1100px){
  body > header{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  body > header .header-user{
    flex-wrap:nowrap!important;
    flex:0 0 auto!important;
  }
}

/* v1.31.6 — follow preview only
   Keep the global header and the right preview visible while the editor
   itself stays in normal document flow. The iframe remains auto-height, so
   the preview shell is the only scroll container on the right. */
@media(min-width:901px){
  .preview-panel{
    position:sticky!important;
    top:92px!important;
    align-self:start!important;
    max-height:calc(100vh - 108px)!important;
    overflow:hidden!important;
  }
  .preview-panel .preview-shell{
    height:calc(100vh - 205px)!important;
    min-height:420px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
  }
}
@media(max-width:900px){
  .preview-panel{
    position:static!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .preview-panel .preview-shell{
    height:auto!important;
    min-height:700px!important;
    overflow:visible!important;
  }
}

/* v1.31.7 — viewport-fitted fixed preview
   On desktop the right preview behaves as a single fixed workspace between
   the global header and the bottom action bar. Only the mail body scrolls. */
@media(min-width:901px){
  :root{
    --mb-editor-header-offset:84px;
    --mb-editor-actionbar-offset:86px;
    --mb-editor-preview-gap:14px;
  }
  .preview-panel{
    position:sticky!important;
    top:calc(var(--mb-editor-header-offset) + var(--mb-editor-preview-gap))!important;
    height:calc(100vh - var(--mb-editor-header-offset) - var(--mb-editor-actionbar-offset) - (var(--mb-editor-preview-gap) * 2))!important;
    max-height:none!important;
    min-height:420px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    align-self:start!important;
  }
  .preview-panel > .panel-hd{
    flex:0 0 auto!important;
  }
  .preview-panel .preview-shell{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
  }
}
@media(max-width:900px){
  .preview-panel{
    height:auto!important;
    min-height:0!important;
  }
}


/* v1.31.8 — align editor / preview start line
   At the initial page position the preview must stay in its natural grid row,
   exactly aligned with the editor card. Once scrolled, it sticks below the
   global header. Keep only a bottom breathing space above the action bar. */
@media(min-width:901px){
  .preview-panel{
    top:var(--mb-editor-header-offset)!important;
    height:calc(100vh - var(--mb-editor-header-offset) - var(--mb-editor-actionbar-offset) - var(--mb-editor-preview-gap))!important;
  }
}


/* v1.31.9 — global overlay / fixed-header safety
   Establish a single layer order across the editor:
   page < bottom action bar < global header < modal < nested modal.
   Modal overlays intentionally cover the fixed header/action bar so their
   title, close control and actions can never be clipped by persistent UI. */
:root{
  --mb-layer-actionbar:900;
  --mb-layer-header:1200;
  --mb-layer-overlay:3000;
  --mb-layer-overlay-nested:3200;
}

body > header{
  z-index:var(--mb-layer-header)!important;
}
.editor-global-actionbar{
  z-index:var(--mb-layer-actionbar)!important;
}

/* All standard editor dialogs sit above every persistent editor surface. */
.modal{
  z-index:var(--mb-layer-overlay)!important;
  inset:0!important;
  padding:24px!important;
  box-sizing:border-box!important;
}
.modal .modal-card{
  max-height:calc(100dvh - 48px)!important;
  max-width:calc(100vw - 48px);
  overscroll-behavior:contain;
}

/* Final review and handoff are full-workflow overlays, never under header. */
#finalReviewModal,
#handoffModal,
#handoffSummaryModal,
#revisionModal,
#discardEditModal,
#manuscriptImportModal,
#mediaLibraryModal,
#commonPartsModal,
#userAdminModal{
  z-index:var(--mb-layer-overlay)!important;
}

/* Test-mail dialogs can open on top of Final Review. */
#testMailSendModal,
#testMailSettingsModal{
  z-index:var(--mb-layer-overlay-nested)!important;
}
#testMailSendModal .modal-card,
#testMailSettingsModal .modal-card{
  z-index:calc(var(--mb-layer-overlay-nested) + 1)!important;
}

/* Template picker is also a true overlay, not editor content. */
.template-picker-backdrop{
  z-index:var(--mb-layer-overlay)!important;
}
.template-picker{
  max-height:calc(100dvh - 48px)!important;
  overscroll-behavior:contain;
}

/* Modal action rows remain visible inside long dialogs without competing
   with the global fixed action bar behind the overlay. */
.final-review-actions,
.final-review-actions-clean,
.handoff-actions,
.handoff-actions-clean{
  position:sticky;
  bottom:0;
  z-index:5!important;
  background:#fff;
}

@media(max-width:760px){
  .modal{
    padding:10px!important;
  }
  .modal .modal-card,
  .template-picker{
    max-height:calc(100dvh - 20px)!important;
    max-width:calc(100vw - 20px)!important;
  }
}

/* =========================================================
   v1.31.10 - Production handoff as a real workflow page
   Modal stacking is intentionally avoided for completion steps.
   ========================================================= */
body.workflow-page-active{
  background:var(--sp-bg,#f4f7fb)!important;
}
body.workflow-page-active > .app,
body.workflow-page-active > #editorGlobalActionbar{
  display:none!important;
}
.workflow-page{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  max-width:1240px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:28px 24px 28px!important;
  background:transparent!important;
  overflow:visible!important;
  z-index:auto!important;
}
.workflow-page.is-active{display:block!important}
.workflow-page > .modal-card{
  position:static!important;
  width:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:26px!important;
  overflow:visible!important;
  border:1px solid var(--sp-border,#d9e1ea)!important;
  border-radius:18px!important;
  box-shadow:0 8px 28px rgba(20,36,58,.08)!important;
  background:#fff!important;
}
.workflow-page .handoff-actions{
  position:static!important;
  margin-top:18px!important;
  padding-top:16px!important;
  border-top:1px solid var(--sp-border,#e2e8f0)!important;
  background:#fff!important;
  box-shadow:none!important;
}
.workflow-page .handoff-grid{
  align-items:stretch;
}
.workflow-page textarea,
.workflow-page select{
  max-width:100%;
}
@media(max-width:760px){
  .workflow-page{padding:16px 12px 20px!important}
  .workflow-page > .modal-card{padding:18px!important;border-radius:14px!important}
}


/* v1.31.13 — unified header vertical alignment */
:root{--app-font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif}
html,body,button,input,select,textarea{font-family:var(--app-font)!important}
body{font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.app-header{position:sticky;top:0;z-index:1200;min-height:68px;height:auto!important;padding:10px 24px!important;background:#111d2f!important;border-bottom:1px solid rgba(255,255,255,.08)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;flex-wrap:nowrap!important;box-shadow:0 6px 18px rgba(15,23,42,.08)}
.app-header .brand{display:flex;align-items:baseline;white-space:nowrap;font-size:17px!important;font-weight:800!important;letter-spacing:-.015em;color:#fff}
.app-header .brand small{font-size:12px!important;font-weight:650!important;opacity:.58;margin-left:9px}
.app-header-nav{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;white-space:nowrap}
.app-header .btn,.app-header .app-nav-link,.header-admin-menu>summary{display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle!important;min-height:38px!important;height:38px!important;box-sizing:border-box!important;padding:0 11px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:10px!important;background:rgba(255,255,255,.035)!important;color:#f8fafc!important;font-size:12px!important;font-weight:700!important;line-height:1!important;text-decoration:none!important;box-shadow:none!important;cursor:pointer}
.app-header .btn:hover,.app-header .app-nav-link:hover,.header-admin-menu>summary:hover{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.26)!important;transform:none!important}
.app-header .app-nav-link.is-active{background:#1769e8!important;border-color:#1769e8!important;color:#fff!important}
.app-header .project-chip{display:inline-flex;align-items:center;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:38px;padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.10);color:#fff;font-size:12px;font-weight:800}
.app-header .user-pill{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:38px;height:38px!important;box-sizing:border-box!important;padding:0 11px!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font-size:12px!important;font-weight:800!important;line-height:1!important;white-space:nowrap}
.app-header .user-icon{width:16px!important;height:16px!important;flex:none}
.header-admin-menu{position:relative;margin:0}
.header-admin-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:6px}
.header-admin-menu>summary::-webkit-details-marker{display:none}
.header-admin-menu>summary::after{content:"⌄";font-size:11px;opacity:.7;margin-left:2px}
.header-admin-menu[open]>summary{background:rgba(255,255,255,.12)!important}
.header-admin-menu-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:1500;min-width:176px;padding:7px;background:#fff;border:1px solid #dbe3ee;border-radius:12px;box-shadow:0 18px 44px rgba(15,23,42,.18);display:grid;gap:3px}
.header-admin-menu-pop a,.header-admin-menu-pop button{appearance:none;border:0;background:transparent;width:100%;padding:10px 11px;border-radius:8px;text-align:left;color:#172033;font:700 12px/1.3 var(--app-font)!important;text-decoration:none;cursor:pointer}
.header-admin-menu-pop a:hover,.header-admin-menu-pop button:hover{background:#f0f5fc}
@media(max-width:1180px){.app-header{overflow-x:auto}.app-header-nav{justify-content:flex-start}.app-header .project-chip{max-width:150px}.app-header::-webkit-scrollbar{height:0}}
@media(max-width:760px){.app-header{padding:9px 12px!important;gap:10px!important}.app-header .brand{font-size:15px!important}.app-header .brand small{display:none}.app-header-nav{gap:5px}.app-header .project-chip{display:none}.app-header .btn,.app-header .app-nav-link,.header-admin-menu>summary{padding:8px 9px!important}}


/* v1.31.16 — reliable module drag insertion marker */
.editor-main-panel #modules .module{
  position:relative;
}
.editor-main-panel #modules .module.is-dragging{
  opacity:.48;
}
.editor-main-panel #modules .module-drop-indicator{
  display:block;
  position:relative;
  width:calc(100% - 16px);
  height:4px;
  margin:5px 8px;
  border-radius:999px;
  background:#1677ff;
  box-shadow:0 0 0 2px rgba(22,119,255,.12),0 3px 10px rgba(22,119,255,.28);
  pointer-events:none;
  z-index:40;
}
.editor-main-panel #modules .module-drop-indicator::before{
  content:"";
  position:absolute;
  left:-1px;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#1677ff;
  transform:translate(-35%,-50%);
}

/* v1.31.16 template editor page */
.template-editor-page{max-width:1180px;margin:28px auto;padding:0 22px 56px}
.template-editor-card{background:#fff;border:1px solid var(--ui-border,#d9e0e8);border-radius:18px;padding:24px;box-shadow:0 10px 28px rgba(16,27,43,.06)}
.template-editor-card .grid{margin-bottom:18px}
.template-editor-card #modules{margin-bottom:10px}
.template-editor-card .module-row{border:1px solid #e3e8ef}
.template-editor-card .modal-actions{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);padding:14px 0 0;margin-top:24px;border-top:1px solid #e6ebf2;z-index:5}
@media(max-width:760px){.template-editor-page{padding:0 12px 32px}.template-editor-card{padding:16px;border-radius:14px}}


/* v1.31.17 — split template design settings into independent sections */
.template-editor-card .design-settings-root{padding:18px;background:#f8fafc;border-color:#dce4ee}
.template-editor-card .design-settings-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.template-editor-card .design-settings-head .lead{margin-top:6px;max-width:860px}
.template-editor-card .design-section-card{margin-top:16px;padding:18px;background:#fff;border:1px solid #dce4ee;border-radius:14px;box-shadow:0 3px 12px rgba(15,23,42,.035)}
.template-editor-card .design-section-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #edf1f6}
.template-editor-card .design-section-header h3{margin:2px 0 5px;font-size:17px}
.template-editor-card .design-section-header p{margin:0;color:#697586;font-size:12px;line-height:1.6}
.template-editor-card .design-section-kicker{font-size:10px;font-weight:900;letter-spacing:.08em;color:#1769e8}
.template-editor-card .design-section-card .style-grid{margin:0}
.template-editor-card .design-inline-preview{margin-top:16px;padding:14px;background:#f7f9fc;border:1px solid #e1e7ef;border-radius:10px}
.template-editor-card .design-inline-preview .design-preview-label{margin-bottom:10px}
.template-editor-card .design-inline-preview .sample-top,.template-editor-card .design-inline-preview .sample-heading{background:#fff}
.template-editor-card .design-inline-preview .sample-cta-wrap{background:#fff;border-radius:8px}
@media(max-width:760px){.template-editor-card .design-section-card{padding:14px}.template-editor-card .design-section-header{padding-bottom:12px;margin-bottom:14px}}


/* v1.31.18 — server-saved user design presets */
.template-editor-card .user-preset-panel{margin:-2px 0 16px;padding:14px;border:1px solid #dce4ee;border-radius:12px;background:#fff;display:grid;grid-template-columns:minmax(220px,.7fr) minmax(480px,1.3fr);gap:14px;align-items:center}
.template-editor-card .user-preset-copy{display:grid;gap:4px}.template-editor-card .user-preset-copy strong{font-size:13px}.template-editor-card .user-preset-copy span{font-size:11px;color:#697586;line-height:1.55}
.template-editor-card .user-preset-controls{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;gap:8px;align-items:center}.template-editor-card .user-preset-controls input{width:100%;min-height:42px;padding:9px 11px;border:1px solid #ccd5e1;border-radius:8px;font:inherit}.template-editor-card .user-preset-status{grid-column:1/-1;min-height:16px;margin-top:-4px;color:#526173}
.template-editor-card #userPresetOptions:empty{display:none}
@media(max-width:900px){.template-editor-card .user-preset-panel{grid-template-columns:1fr}.template-editor-card .user-preset-controls{grid-template-columns:1fr auto auto}}
@media(max-width:650px){.template-editor-card .user-preset-controls{grid-template-columns:1fr}.template-editor-card .user-preset-controls .btn{width:100%}}


/* =========================================================
   v1.31.20 — Template editor information architecture
   Three focused tabs + visual preset library.
   ========================================================= */
.template-editor-page{max-width:1240px!important}
.template-editor-head{margin-bottom:16px!important}
.template-editor-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 22px;padding:6px;background:#f2f6fb;border:1px solid #dce4ee;border-radius:14px}
.template-editor-tab{appearance:none;border:1px solid transparent;background:transparent;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:11px;text-align:left;color:#657083;cursor:pointer;font:inherit;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.template-editor-tab:hover{background:#fff;color:#172033}
.template-editor-tab.is-active{background:#fff;border-color:#cdd9ea;color:#145fcf;box-shadow:0 3px 10px rgba(15,23,42,.06)}
.template-tab-step{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:999px;background:#e9eff7;color:#64748b;font-size:12px;font-weight:900}
.template-editor-tab.is-active .template-tab-step{background:#1769e8;color:#fff}
.template-editor-tab>span:last-child{display:grid;gap:2px}.template-editor-tab strong{font-size:13px}.template-editor-tab small{font-size:10px;font-weight:600;color:#8792a3}
.template-tab-panel{display:none}.template-tab-panel.is-active{display:block}
.template-panel-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px}.template-panel-heading-sub{margin-top:28px}
.template-panel-kicker{display:block;margin-bottom:4px;color:#1769e8;font-size:10px;font-weight:900;letter-spacing:.1em}.template-panel-heading h2{margin:0;font-size:20px;letter-spacing:-.02em}.template-panel-heading p{margin:5px 0 0;color:#697586;font-size:12px;line-height:1.6}
.template-basic-card{padding:18px;border:1px solid #dce4ee;border-radius:14px;background:#fff}.template-basic-card .grid{margin:0!important}
.template-enabled-label{display:inline-flex!important;align-items:center;gap:8px;min-height:38px}.template-enabled-label input{width:auto!important;margin:0!important}
.template-modules-list{display:grid;gap:8px;margin:0!important}.template-add-module-bottom{margin-top:10px}.primary-soft{border-color:#bdd3f7!important;background:#eef5ff!important;color:#145fcf!important}
.design-settings-tab{padding:0!important;background:transparent!important;border:0!important}.design-settings-tab .design-section-card:first-child{margin-top:0!important}
.template-editor-savebar{position:sticky!important;bottom:0!important;margin:28px -24px -24px!important;padding:14px 24px!important;background:rgba(255,255,255,.96)!important;border-top:1px solid #dce4ee!important;box-shadow:0 -8px 20px rgba(15,23,42,.055)!important;backdrop-filter:blur(10px)!important;z-index:20!important}
.preset-library-section{margin-bottom:24px}.preset-library-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.preset-library-heading h3{margin:0;font-size:16px}.preset-library-heading p{margin:4px 0 0;color:#697586;font-size:11px}
.preset-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.preset-card-grid-user{grid-template-columns:repeat(2,minmax(0,1fr))}
.preset-choice-card{overflow:hidden;border:1px solid #dce4ee;border-radius:14px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.preset-choice-card:hover{border-color:#b8c9e1;box-shadow:0 8px 24px rgba(15,23,42,.07);transform:translateY(-1px)}.preset-choice-card.is-selected{border-color:#1769e8;box-shadow:0 0 0 2px rgba(23,105,232,.10),0 8px 22px rgba(23,105,232,.09)}
.preset-choice-visual{padding:14px;background:#eef2f7;border-bottom:1px solid #e3e9f1}.preset-mini{overflow:hidden;border-radius:7px;background:#fff;box-shadow:0 2px 7px rgba(15,23,42,.08)}.preset-mini-top,.preset-mini-heading{padding:9px 10px;text-align:center;font-size:9px;font-weight:900;letter-spacing:.05em;box-sizing:border-box}.preset-mini-heading{margin-top:7px}.preset-mini-body{padding:12px;text-align:center}.preset-mini-cta{display:inline-block;padding:7px 14px;font-size:8px;font-weight:900;line-height:1}
.preset-choice-body{padding:14px}.preset-choice-tag{display:inline-block;margin-bottom:5px;color:#1769e8;font-size:9px;font-weight:900;letter-spacing:.08em}.preset-choice-body h4{margin:0 0 5px;font-size:14px}.preset-choice-body p{min-height:34px;margin:0 0 12px;color:#697586;font-size:10px;line-height:1.55}.preset-choice-body .btn{width:100%}
.preset-empty-state{grid-column:1/-1;padding:28px;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;text-align:center;color:#778396;font-size:11px}.preset-save-panel{margin:8px 0 0!important;background:#f8fafc!important}.preset-state-select{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;opacity:0!important;pointer-events:none!important}
@media(max-width:900px){.preset-card-grid,.preset-card-grid-user{grid-template-columns:repeat(2,minmax(0,1fr))}.template-editor-tabs{grid-template-columns:1fr}.template-editor-tab{padding:10px 12px}.template-editor-tab small{display:none}}
@media(max-width:620px){.preset-card-grid,.preset-card-grid-user{grid-template-columns:1fr}.template-panel-heading{align-items:flex-start;flex-direction:column}.template-panel-heading .btn{width:100%}.template-editor-savebar{margin:22px -16px -16px!important;padding:12px 16px!important}}


/* v1.31.21 — concurrent editing lock */
.edit-lock-modal{
  position:fixed;inset:0;z-index:2600;align-items:center;justify-content:center;
  padding:24px;background:rgba(15,23,42,.56);backdrop-filter:blur(5px);
}
.edit-lock-dialog{
  width:min(560px,100%);background:#fff;border:1px solid #dbe3ef;border-radius:20px;
  box-shadow:0 28px 80px rgba(15,23,42,.28);padding:30px;text-align:center;
}
.edit-lock-icon{
  width:56px;height:56px;margin:0 auto 16px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:#eef5ff;color:#1468e8;font-size:27px;font-weight:900;
}
.edit-lock-dialog h2{margin:0 0 10px;font-size:22px;line-height:1.4;color:#142033}
.edit-lock-message{margin:0 auto 18px;max-width:470px;color:#536179;line-height:1.75}
.edit-lock-meta{margin:0 0 22px;padding:14px 16px;border:1px solid #dce6f4;border-radius:12px;background:#f8fbff;text-align:left;color:#334155}
.edit-lock-meta strong{display:inline-block;margin-right:6px}
.edit-lock-meta span{display:block;margin-top:5px;font-size:12px;color:#64748b}
.edit-lock-meta small{display:block;margin-top:8px;color:#7a8799;line-height:1.6}
.edit-lock-actions{display:flex;gap:10px;justify-content:flex-end}
.edit-lock-actions button{min-height:44px;padding:0 18px}
@media(max-width:640px){.edit-lock-dialog{padding:22px 18px}.edit-lock-actions{flex-direction:column-reverse}.edit-lock-actions button{width:100%}}

/* v1.31.23: generic per-project production guide */
.project-guide-panel{margin:0 18px 14px;border:1px solid #cfe0f5;border-radius:12px;background:#f7fbff;overflow:hidden}
.project-guide-panel summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;color:#17365f;font-weight:800;font-size:13px}
.project-guide-panel summary::-webkit-details-marker{display:none}.project-guide-panel summary:after{content:'＋';font-size:16px;color:#5a7699}.project-guide-panel details[open] summary:after{content:'−'}
.project-guide-panel summary small{margin-left:auto;color:#6b7d91;font-size:11px;font-weight:600}.project-guide-body{border-top:1px solid #dbe8f5;padding:13px 15px 14px;white-space:pre-wrap;font-size:12px;line-height:1.8;color:#26384d;background:#fff}
@media(max-width:760px){.project-guide-panel{margin:0 12px 12px}.project-guide-panel summary small{display:none}}