:root{
  --brand:#6f5bb7;--brand-dark:#51408d;--bg:#f5f4f8;--panel:#fff;--border:#dcd9e5;
  --text:#292733;--muted:#706d7a;--danger:#b43a48;--shadow:0 8px 28px rgba(44,36,72,.08)
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;color:var(--text);background:var(--bg)}
button,input,textarea,select{font:inherit}
button{cursor:pointer;border:1px solid var(--border);background:#fff;border-radius:8px;padding:9px 12px;color:var(--text)}
button:hover{border-color:var(--brand)}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
button.primary:hover{background:var(--brand-dark)}
button.danger-outline{color:var(--danger);border-color:#e6b9bf}
.full{width:100%;margin:4px 0}
.app-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:12px 22px;background:#fff;border-bottom:1px solid var(--border)}
.app-header h1{font-size:20px;margin:0}.app-header h1 span{font-size:12px;color:#fff;background:var(--brand);padding:3px 7px;border-radius:999px}
.app-header p{font-size:12px;color:var(--muted);margin:4px 0 0}
.save-state{font-size:13px;color:var(--muted)}
.layout{display:grid;grid-template-columns:270px minmax(500px,1fr) 280px;gap:14px;padding:14px;min-height:calc(100vh - 76px)}
.sidebar,.actions{display:flex;flex-direction:column;gap:12px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.panel h2{font-size:15px;margin:0 0 10px}.panel h2 small{font-weight:400;color:var(--muted)}
.panel label,.modal-card label{display:flex;flex-direction:column;gap:5px;font-size:12px;margin:9px 0;color:var(--muted)}
.panel input,.panel select,.modal-card input,.modal-card textarea,.modal-card select{width:100%;border:1px solid var(--border);border-radius:8px;padding:9px;background:#fff;color:var(--text)}
.panel input[type=color],.modal-card input[type=color]{height:38px;padding:3px}
.check{flex-direction:row!important;align-items:center}.check input{width:auto!important}
.workspace{display:flex;min-width:0;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.title-row{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--border)}
.title-row input{flex:1;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:17px;font-weight:600}
.toolbar{display:flex;flex-wrap:wrap;gap:5px;padding:9px 12px;background:#faf9fc;border-bottom:1px solid var(--border)}
.toolbar button{padding:6px 10px}
.editor{flex:1;min-height:600px;padding:28px 34px;outline:none;line-height:1.9;overflow:auto;background:#fff;color:#333;font-size:16px}
.editor:empty:before{content:"ここにメルマガ本文を書きます。左側から見出し枠や広告枠を挿入できます。";color:#aaa}
.editor .mail-paragraph{margin:0 0 1em;min-height:1.5em}
.editor .mail-heading,.editor .mail-ad{position:relative;margin:20px 0;padding:14px 16px;border-radius:8px}
.editor .mail-heading{font-weight:700}
.editor .mail-ad{border-style:solid;border-width:2px}
.editor .block-tools{position:absolute;top:-12px;right:6px;display:none;gap:3px}
.editor .mail-heading:hover .block-tools,.editor .mail-ad:hover .block-tools{display:flex}
.editor .block-tools button{padding:3px 7px;font-size:11px}
.editor-footer{display:flex;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.draft-list{margin-top:8px;max-height:260px;overflow:auto}
.draft-item{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding:9px;border-radius:8px;margin:5px 0;cursor:pointer;border:1px solid transparent}
.draft-item:hover{background:color-mix(in srgb,var(--brand) 8%,white)}.draft-item.active{background:color-mix(in srgb,var(--brand) 16%,white);border-color:var(--brand)}
.draft-item-main{display:flex;flex-direction:column;min-width:0;flex:1}
.draft-item strong{display:block;font-size:13px;line-height:1.45;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.draft-item small{font-size:10px;color:var(--muted)}
.draft-item .actions-mini{display:flex;justify-content:flex-end;gap:5px;width:100%}
.draft-item .actions-mini button{min-width:48px;padding:4px 8px;font-size:10px}
.panel-divider{border:0;border-top:1px solid var(--border);margin:14px 0}
.sidebar .draft-list{max-height:150px}
#draftTemplateList{max-height:130px}
.sealed-note{border-left:3px solid var(--brand);padding-left:8px;margin-top:5px}
.segmented{display:flex}.segmented button{flex:1;border-radius:0}.segmented button:first-child{border-radius:8px 0 0 8px}.segmented button:last-child{border-radius:0 8px 8px 0}.segmented button.active{background:#eee9ff;color:var(--brand-dark)}
.file-label{display:block;text-align:center;border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);cursor:pointer}
.file-label input{display:none}.note{font-size:11px;line-height:1.5;color:var(--muted)}
dialog{border:none;padding:0;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);max-width:calc(100vw - 30px)}
dialog::backdrop{background:rgba(24,20,35,.5)}
.modal-card{width:520px;max-width:100%;padding:18px}.modal-card.wide{width:700px}
.modal-card header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);margin:-3px 0 14px;padding-bottom:10px}
.modal-card h2{margin:0;font-size:18px}.icon-btn{border:none;background:transparent;font-size:22px;padding:2px 8px}
.modal-card menu{display:flex;justify-content:flex-end;gap:8px;margin:16px 0 0;padding:0}
.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.template-card{border:1px solid var(--border);border-radius:8px;padding:9px;font-size:12px;cursor:pointer;white-space:pre-line}
.template-card.selected{border:2px solid var(--brand);background:#f5f1ff}
.tag-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tag-grid button{text-align:left}.tag-grid code{display:block;color:var(--brand-dark);font-size:11px;margin-top:3px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.preview-card{width:760px}.preview-card #previewContent{max-height:70vh;overflow:auto;padding:20px;border:1px solid var(--border);border-radius:8px}
.preview-text{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.8}
.toast{position:fixed;right:22px;bottom:22px;background:#282433;color:#fff;padding:11px 16px;border-radius:9px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1050px){.layout{grid-template-columns:220px 1fr}.actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.layout{display:block}.sidebar,.actions{margin-bottom:12px}.actions{display:block}.workspace{min-height:700px}.editor{padding:20px;min-height:520px}.two-col,.three-col,.template-grid{grid-template-columns:1fr}.app-header p{display:none}}

.saved-template-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.saved-template-item{border:1px solid var(--border);border-radius:8px;padding:9px;display:flex;justify-content:space-between;align-items:center;font-size:12px}
.saved-template-item .actions-mini{display:flex;gap:4px}
.saved-template-item button{padding:4px 7px;font-size:11px}
.editor .mail-header,.editor .mail-footer{position:relative;margin:18px 0;padding:18px;border-style:solid;border-width:2px;border-radius:10px}
.editor .mail-header{text-align:left}.editor .mail-header img{max-width:100%;height:auto;display:block;margin:0 auto 12px}
.editor .mail-header h2{margin:0 0 6px}.editor .mail-header p{margin:0}
.editor .mail-footer h3{margin-top:0}
.editor .mail-header:hover .block-tools,.editor .mail-footer:hover .block-tools{display:flex}
.image-maker-card{width:1100px}
.image-maker-layout{display:grid;grid-template-columns:310px 1fr;gap:18px}
.image-controls{max-height:72vh;overflow:auto;padding-right:5px}
.canvas-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f3f1f7;border-radius:10px;padding:12px;min-width:0}
.canvas-wrap canvas{max-width:100%;height:auto;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.15)}
@media(max-width:900px){.image-maker-layout{grid-template-columns:1fr}.image-maker-card{width:95vw}.canvas-wrap{order:-1}}

.editor .mail-header .header-body,
.editor .mail-footer .footer-body{
  line-height:1.9;
}
.modal-card textarea{
  resize:vertical;
}
#headerBody,#footerBody{
  min-height:250px;
}

#exportFileName,#imageFileName{font-weight:600;}

.editor .mail-header{
  text-align:left;
}
.editor .mail-header[data-border="off"],
.editor .mail-footer[data-border="off"],
.editor .mail-ad[data-border="off"]{
  border:0!important;
}
.editor .mail-heading[data-border="off"]{
  border-left:0!important;
}

.seventh-guide{
  margin-top:10px;
  padding:11px 12px;
  border:1px solid #d8d2ee;
  border-radius:8px;
  background:#f8f6ff;
  font-size:12px;
  line-height:1.6;
}
.seventh-guide strong{
  display:block;
  margin-bottom:5px;
  color:#51408d;
}
.seventh-guide ol{
  margin:5px 0 7px 20px;
  padding:0;
}
.seventh-guide p{
  margin:0;
  color:#6f687d;
}

.source-modal-card{
  width:900px;
  max-width:95vw;
}
#seventhSourceOutput{
  width:100%;
  min-height:430px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:13px;
  line-height:1.55;
  white-space:pre;
  tab-size:2;
}
.source-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}

.toolbar{
  position:sticky;
  top:0;
  z-index:20;
  align-items:center;
  max-height:none;
}
.toolbar select{
  border:1px solid var(--border);
  border-radius:6px;
  padding:6px;
  background:#fff;
}
.toolbar-group{
  display:inline-flex;
  gap:4px;
  align-items:center;
  padding-right:6px;
  margin-right:2px;
  border-right:1px solid var(--border);
}
.toolbar-group:last-child{border-right:0}
.color-tools label{
  display:flex;
  align-items:center;
  gap:3px;
  font-size:11px;
  color:var(--muted);
}
.color-tools input[type=color]{
  width:31px;
  height:28px;
  padding:2px;
  border:1px solid var(--border);
  border-radius:5px;
}
.compact-details{
  margin-top:8px;
  border-top:1px solid var(--border);
  padding-top:8px;
}
.compact-details summary{
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:var(--brand-dark);
}
.schedule-fields{
  padding:8px 10px;
  background:#f8f6ff;
  border:1px solid #ddd5f4;
  border-radius:8px;
  margin-bottom:8px;
}
.image-macro-slots{
  display:grid;
  gap:12px;
  max-height:68vh;
  overflow:auto;
}
.image-macro-slot{
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  background:#faf9fc;
}
.image-macro-slot h3{
  margin:0 0 8px;
  font-size:14px;
}
.image-macro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.image-macro-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
}
#editorSourceOutput{
  width:100%;
  min-height:430px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:13px;
  line-height:1.55;
}
@media(max-width:760px){
  .image-macro-grid{grid-template-columns:1fr}
  .toolbar{top:0}
}

.color-palette-popup{
  position:fixed;
  z-index:1000;
  width:250px;
  padding:10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.palette-title{
  font-weight:700;
  font-size:13px;
  margin-bottom:8px;
}
.color-palette-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:5px;
  margin-bottom:8px;
}
.color-swatch{
  width:24px;
  height:24px;
  padding:0;
  border:1px solid #aaa;
  border-radius:5px;
  cursor:pointer;
}
.color-swatch:hover{
  outline:2px solid #6f5bb7;
  outline-offset:1px;
}
.color-tools input[type=color]{
  width:30px;
  min-width:30px;
  height:30px;
  padding:2px;
}

/* v0.4.2: compact UI and reliable sticky toolbar */
.workspace{
  overflow:visible;
  align-self:start;
}
.toolbar{
  position:sticky!important;
  top:0!important;
  z-index:500!important;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
  border-radius:12px 12px 0 0;
}
button{
  padding:6px 9px;
  border-radius:6px;
}
.full{
  margin:2px 0;
}
.panel{
  padding:10px;
}
.panel h2{
  margin-bottom:7px;
}
.panel label,.modal-card label{
  margin:5px 0;
  gap:3px;
}
.panel input,.panel select,.modal-card input,.modal-card textarea,.modal-card select{
  padding:6px 8px;
  border-radius:6px;
}
.modal-card{
  padding:13px;
}
.modal-card.wide{
  width:860px;
}
.image-macro-slots{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  max-height:68vh;
}
.image-macro-slot{
  padding:8px;
  border-radius:8px;
}
.image-macro-head{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:8px;
  align-items:start;
}
.image-macro-thumb{
  width:72px;
  height:72px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-size:11px;
  color:var(--muted);
}
.image-macro-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.image-macro-main{
  min-width:0;
}
.image-macro-more{
  margin-top:5px;
  font-size:12px;
}
.image-macro-more summary{
  cursor:pointer;
  color:var(--brand-dark);
}
.image-macro-grid{
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.image-macro-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-top:6px;
}
.image-macro-actions button{
  padding:6px;
}
@media(max-width:760px){
  .image-macro-slots{grid-template-columns:1fr}
}

.enhanced-color-field{
  display:grid;
  grid-template-columns:42px 90px auto;
  gap:5px;
  align-items:center;
}
.enhanced-color-field>input[type="color"]{
  width:42px!important;
  min-width:42px!important;
  height:32px;
  padding:2px!important;
}
.color-hex-input{
  width:90px!important;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.save-field-color{
  white-space:nowrap;
  padding:5px 7px;
  font-size:11px;
}
.field-color-palette{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(8,24px);
  gap:4px;
  margin-top:2px;
}
.field-color-swatch{
  width:24px;
  height:24px;
  min-width:24px;
  padding:0;
  border:1px solid #aaa;
  border-radius:4px;
}
.symbol-line{
  white-space:nowrap;
  overflow:hidden;
}

.symbol-recommendations{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  margin:4px 0 7px;
  font-size:11px;
  color:var(--muted);
}
.symbol-recommendations button{
  min-width:38px;
  padding:4px 6px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
}

/* v0.4.5: fixed three-column work area */
html,body{
  height:100%;
}
body{
  overflow:hidden;
}
.app-header{
  height:64px;
  padding:8px 16px;
}
.layout{
  height:calc(100vh - 64px);
  min-height:0;
  padding:8px;
  gap:8px;
  grid-template-columns:205px minmax(560px,1fr) 250px;
  overflow:hidden;
}
.sidebar,.actions{
  height:100%;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  gap:8px;
  padding-right:2px;
}
.workspace{
  height:100%;
  min-height:0;
  align-self:stretch;
  overflow:hidden!important;
  display:flex;
  flex-direction:column;
}
.title-row{
  flex:0 0 auto;
  padding:7px 8px;
}
.title-row input{
  padding:7px 9px;
  font-size:15px;
}
.toolbar{
  position:relative!important;
  top:auto!important;
  flex:0 0 auto;
  padding:5px 7px!important;
  gap:3px!important;
  border-radius:0!important;
  box-shadow:none!important;
  max-height:74px;
  overflow-y:auto;
}
.toolbar button{
  padding:4px 6px!important;
  min-height:27px;
  font-size:12px;
}
.toolbar select{
  padding:4px 5px!important;
  min-height:27px;
  font-size:12px;
  max-width:132px;
}
.toolbar-group{
  gap:2px!important;
  padding-right:4px!important;
  margin-right:0!important;
}
.color-tools input[type=color]{
  width:25px!important;
  min-width:25px!important;
  height:25px!important;
}
.editor{
  flex:1 1 auto;
  min-height:0!important;
  overflow-y:auto!important;
  padding:22px 28px;
}
.editor-footer{
  flex:0 0 auto;
  padding:5px 10px;
}
.panel{
  padding:8px!important;
  border-radius:9px;
}
.panel h2{
  font-size:13px;
  margin-bottom:5px!important;
}
.panel h2 small{
  font-size:10px;
}
.panel button,
.panel .file-label{
  padding:5px 7px!important;
  font-size:12px;
}
.panel label{
  margin:4px 0!important;
  font-size:11px;
}
.panel input,.panel select{
  padding:5px 6px!important;
  font-size:12px;
}
.draft-list{
  max-height:180px;
}
.actions .compact-details{
  margin-top:5px;
  padding-top:5px;
}
@media(max-width:1050px){
  body{overflow:auto}
  .layout{
    height:auto;
    min-height:calc(100vh - 64px);
    overflow:visible;
    grid-template-columns:185px minmax(500px,1fr);
  }
  .sidebar,.actions{
    height:auto;
    overflow:visible;
  }
  .actions{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .workspace{
    min-height:720px;
  }
}
@media(max-width:760px){
  .layout{display:block}
  .toolbar{max-height:none}
  .workspace{min-height:700px}
}

/* v0.4.6: insertion markers and compact partial-format toolbar */
.toolbar{
  max-height:62px!important;
  padding:3px 5px!important;
}
.toolbar button{
  padding:3px 5px!important;
  min-height:24px!important;
  font-size:11px!important;
}
.toolbar select{
  padding:3px 4px!important;
  min-height:24px!important;
  font-size:11px!important;
}
.toolbar-group{
  padding-right:3px!important;
}
.insert-marker{
  height:12px;
  position:relative;
  margin:-2px 0;
  opacity:0;
  transition:opacity .15s ease;
  z-index:8;
}
.insert-marker:hover,
.insert-marker:focus-within{
  opacity:1;
}
.insert-marker::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  border-top:1px solid #8d7ac2;
}
.insert-marker button{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:24px;
  height:24px;
  padding:0!important;
  border-radius:50%;
  background:#fff;
  color:#6f5bb7;
  border:1px solid #8d7ac2;
  font-size:17px!important;
  line-height:20px;
  z-index:2;
}
.insert-marker button:hover{
  background:#6f5bb7;
  color:#fff;
}
.editor > .mail-header,
.editor > .mail-footer,
.editor > .mail-heading,
.editor > .mail-ad,
.editor > .mail-paragraph{
  position:relative;
}

/* v0.4.7: stable insertion controls */
.insert-marker{
  height:24px!important;
  margin:1px 0!important;
  opacity:1!important;
  transition:none!important;
}
.insert-marker::before{
  border-top:1px dashed #c8c1dc!important;
}
.insert-marker button{
  width:22px!important;
  height:22px!important;
  font-size:15px!important;
  background:#f8f6ff!important;
}
.insert-marker button:hover{
  background:#6f5bb7!important;
  color:#fff!important;
}
.editor-image-selected{
  outline:2px solid #6f5bb7;
  outline-offset:3px;
}
.header-body,.footer-body,.heading-title,.ad-body,.ad-label{
  min-height:1.4em;
  cursor:text;
}

/* v0.5.0: line-based mail blocks */
.mail-line{
  white-space:nowrap;
  overflow:hidden;
  min-height:1.2em;
  margin:4px 0;
  user-select:none;
}
.mail-heading{
  padding:10px 12px;
  margin:12px 0;
}
.mail-heading .heading-title{
  min-height:1.4em;
  cursor:text;
}
.line-preview{
  margin:10px 0;
  padding:10px;
  background:#faf9fc;
  border:1px solid var(--border);
  border-radius:8px;
  white-space:nowrap;
  overflow:hidden;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.insert-marker{
  height:12px!important;
  margin:0!important;
  opacity:0!important;
  transition:none!important;
  position:relative;
  z-index:8;
}
.insert-marker:hover,
.insert-marker:focus-within{
  opacity:1!important;
}
.insert-marker::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  border-top:1px dashed #c8c1dc!important;
}
.insert-marker button{
  width:auto!important;
  min-width:54px!important;
  height:22px!important;
  padding:2px 7px!important;
  border-radius:999px!important;
  font-size:11px!important;
  background:#fff!important;
  color:#6f5bb7!important;
}
.mail-spacer{
  position:relative;
  min-height:1.8em;
}
.mail-spacer .remove-spacer{
  display:none;
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  padding:0!important;
  border-radius:50%;
  color:#a12634;
  background:#fff;
  border:1px solid #d9b6bb;
}
.mail-spacer:hover .remove-spacer{
  display:block;
}

/* v0.5.1 fixes */
.mail-header,
.mail-footer,
.mail-heading,
.mail-ad{
  border:0!important;
  outline:0!important;
}
.inserted-paragraph{
  min-height:1.8em;
  margin:0 0 16px;
  padding:2px 0;
  cursor:text;
}
.inserted-paragraph:focus{
  outline:1px dashed #b7acd5;
  outline-offset:2px;
}
.insert-marker{
  height:16px!important;
}
.insert-marker button{
  min-width:64px!important;
}

/* v0.5.2: compact line-height and palette-first colors */
.editor{
  line-height:1.5!important;
}
.editor .mail-paragraph{
  margin:0 0 .45em!important;
  min-height:1.4em!important;
  line-height:1.5!important;
}
.editor .mail-header .header-body,
.editor .mail-footer .footer-body,
.editor .mail-heading .heading-title,
.editor .mail-ad .ad-body,
.editor .mail-ad h3,
.editor .mail-ad .ad-label{
  line-height:1.5!important;
}
.mail-line{
  display:block!important;
  margin:0!important;
  line-height:1.5!important;
}
.enhanced-color-field{
  display:block!important;
}
.field-color-palette{
  display:grid!important;
  grid-template-columns:repeat(8,24px)!important;
  gap:4px!important;
  margin:3px 0 5px!important;
}
.color-detail-settings{
  margin-top:2px;
  font-size:11px;
}
.color-detail-settings summary{
  cursor:pointer;
  color:var(--brand-dark);
  text-align:right;
  list-style:none;
}
.color-detail-settings summary::-webkit-details-marker{
  display:none;
}
.color-detail-row{
  display:grid;
  grid-template-columns:42px 92px 1fr;
  gap:5px;
  align-items:center;
  margin-top:5px;
}
.native-color-slot input[type="color"]{
  width:42px!important;
  min-width:42px!important;
  height:30px!important;
  padding:2px!important;
}
.color-detail-row .color-hex-input{
  width:92px!important;
}
.color-detail-row .save-field-color{
  padding:5px 7px!important;
  font-size:11px!important;
}

/* v0.5.3 */
.editor{
  line-height:1.35!important;
}
.editor .mail-paragraph{
  margin:0!important;
  min-height:1.35em!important;
  line-height:1.35!important;
}
.editor .mail-header .header-body,
.editor .mail-footer .footer-body,
.editor .mail-heading .heading-title,
.editor .mail-ad .ad-body,
.editor .mail-ad h3,
.editor .mail-ad .ad-label{
  line-height:1.35!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
.mail-heading{
  padding:6px 10px!important;
  margin:6px 0!important;
}
.mail-heading .heading-title{
  font-size:16px!important;
  margin:2px 0!important;
}
.mail-line{
  line-height:1.2!important;
}
.dark-line-palette{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:4px 0 7px;
}
.dark-line-palette button{
  width:22px;
  height:22px;
  min-width:22px;
  padding:0!important;
  border:1px solid #aaa;
  border-radius:4px;
}

/* v0.5.4 */
.wp-copy-settings{
  display:grid;
  gap:5px;
  padding:7px 0;
}
.wp-copy-settings>strong{
  margin-top:5px;
  font-size:12px;
  color:var(--brand-dark);
}
.wp-copy-settings label{
  margin:1px 0!important;
}
.line-delete{
  display:none;
  margin-left:6px;
  width:20px;
  height:20px;
  padding:0!important;
  border-radius:50%;
  border:1px solid #d6b7bc;
  background:#fff;
  color:#a12634;
  font-size:12px!important;
  vertical-align:middle;
}
.mail-line:hover .line-delete{
  display:inline-block;
}
.mail-line .line-text{
  white-space:nowrap;
}

/* v0.5.5 */
.mail-line{
  display:block!important;
  min-height:1.2em!important;
  color:#000000;
  background:transparent!important;
}
.mail-heading{
  background:#ffffff;
  border:0!important;
}
.mail-heading>.mail-line{
  color:#000000;
}
.line-delete{
  display:none!important;
}

/* v0.5.6 */
.line-length-number{
  display:grid;
  grid-template-columns:minmax(70px,1fr) minmax(110px,1.4fr);
  gap:5px;
}
.line-length-number input,
.line-length-number select{
  width:100%;
}
.toolbar{
  row-gap:4px!important;
}
.field-color-palette{
  grid-template-columns:repeat(8,24px)!important;
}

/* v0.5.7 */
.field-color-swatch,
#colorPaletteGrid button{
  position:relative;
  transition:transform .08s ease,box-shadow .08s ease,border-color .08s ease;
}
.field-color-swatch.is-selected,
#colorPaletteGrid button.is-selected,
.image-align-buttons button.is-selected{
  border:2px solid #111!important;
  box-shadow:inset 0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.35)!important;
  transform:translateY(1px);
}
.field-color-swatch.is-selected,
#colorPaletteGrid button.is-selected{
  color:#fff;
  text-shadow:0 1px 2px #000;
  font-weight:700;
}
.image-maker-card{
  width:min(1180px,96vw)!important;
}
.image-controls{
  max-height:72vh;
  overflow:auto;
  padding-right:6px;
}
.canvas-wrap canvas{
  cursor:move;
  max-width:100%;
  height:auto;
  border:1px solid #bdb7c9;
  background:#fff;
}

/* v0.5.8 stable insertion and preserved features */
.save-state-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.save-state-wrap small{
  font-size:11px;
  color:#666;
}
.feature-preserved{
  border-left:4px solid var(--brand)!important;
}
.insert-position-status{
  padding:7px 10px;
  background:#fff7d6;
  border:1px solid #d8bd58;
  border-radius:7px;
  font-size:12px;
  margin-bottom:5px;
}
.insert-position-status button{
  margin-left:8px;
  padding:3px 8px!important;
  font-size:11px!important;
}
.insert-marker{
  display:block!important;
  height:18px!important;
  min-height:18px!important;
  margin:1px 0!important;
  opacity:.42!important;
  position:relative;
  z-index:8;
}
.insert-marker:hover,
.insert-marker:focus-within,
.insert-marker.is-active{
  opacity:1!important;
}
.insert-marker::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  border-top:1px dashed #9c8ac4!important;
}
.insert-marker button{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:auto!important;
  min-width:92px!important;
  height:22px!important;
  padding:2px 9px!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#5b438f!important;
  border:1px solid #9c8ac4!important;
  font-size:11px!important;
  white-space:nowrap;
}
.insert-marker.is-active::before{
  border-top:2px solid #6f5bb7!important;
}
.insert-marker.is-active button{
  background:#6f5bb7!important;
  color:#fff!important;
  box-shadow:0 0 0 2px rgba(111,91,183,.18);
}
.field-color-swatch.is-selected,
#colorPaletteGrid button.is-selected{
  border:2px solid #111!important;
  box-shadow:inset 0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.35)!important;
  transform:translateY(1px);
  color:#fff;
  text-shadow:0 1px 2px #000;
  font-weight:700;
}

/* v0.5.9 complete Seventh export */
.source-export-stats{
  margin:0 0 7px;
  padding:7px 9px;
  border-radius:7px;
  background:#edf8ee;
  border:1px solid #8ebd94;
  color:#285c35;
  font-weight:700;
}
.source-export-stats.is-warning{
  background:#fff4d6;
  border-color:#d3aa43;
  color:#775a00;
}

/* v0.6.0 */
#previewContent .preview-colored-block{padding-left:1em!important;padding-right:1em!important;box-sizing:border-box!important}
.planned-feature-button{cursor:not-allowed!important;opacity:.65;background:#f3f3f3!important}
.planned-feature-note{border-left:3px solid #b9afcc;padding-left:8px}
.image-width-field{display:block;padding:7px 8px;background:#f7f5fb;border:1px solid #d8d1e4;border-radius:8px}
.image-width-field input{font-weight:700}

/* v0.6.1 */
.mail-ad .ad-cta a{
  overflow-wrap:anywhere;
}

/* v0.6.2: Enter paragraph spacing, Shift+Enter tight line break, one insertion marker */
.editor-footer{
  gap:12px;
  flex-wrap:wrap;
}
.break-guide{
  color:#5d4aa8;
}
.break-guide b{
  color:#332562;
}
.editor > .mail-paragraph{
  margin:0 0 .8em!important;
  line-height:1.35!important;
}
.editor > .mail-paragraph:last-of-type{
  margin-bottom:0!important;
}
.editor .header-body > .editor-inner-paragraph,
.editor .footer-body > .editor-inner-paragraph,
.editor .ad-body > .editor-inner-paragraph,
.editor .heading-title > .editor-inner-paragraph{
  margin:0 0 .8em!important;
  line-height:1.35!important;
}
.editor .header-body > .editor-inner-paragraph:last-child,
.editor .footer-body > .editor-inner-paragraph:last-child,
.editor .ad-body > .editor-inner-paragraph:last-child,
.editor .heading-title > .editor-inner-paragraph:last-child{
  margin-bottom:0!important;
}
.insert-marker{
  opacity:0!important;
  pointer-events:none;
}
.insert-marker.is-visible,
.insert-marker.is-active{
  opacity:1!important;
  pointer-events:auto;
}

/* v0.6.3 */
.saved-template-item > span:first-child{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.saved-template-item small{
  color:#777;
  font-size:10px;
}
#localBackupStatus{
  margin:4px 0 7px;
}
#localBackupSelect{
  width:100%;
}

/* v0.6.4: Enter is a paragraph; Shift+Enter remains a line break */

/* v0.6.7 */
.image-macro-align-field{
  display:block;
  margin-top:8px;
}
.image-macro-align-field select{
  width:100%;
}

/* v0.6.8
   Seventh structured blocks restored.
   Classic and Seventh images retain each image's own alignment. */


/* v0.6.10
   v0.6.8を土台に、セブンスのヘッダー・フッター改行と
   ブロックエディタの画像別配置だけを修正。 */

/* v0.7.0 */
:root{--brand:#6f5bb7;--brand-dark:#4e397e}
#charCount{color:var(--brand-dark);font-size:14px}
.part-file-actions{margin-top:10px}
.extra-feature-button{position:fixed;right:18px;bottom:18px;z-index:50;background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 5px 18px rgba(0,0,0,.2)}
#particleLayer{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.particle{position:absolute;top:-15%;object-fit:contain;will-change:transform;animation:particle-down linear infinite}
.particle.up{top:auto;bottom:-15%;animation-name:particle-up}
.particle.diagonal{animation-name:particle-diagonal}
@keyframes particle-down{to{transform:translate3d(var(--drift),125vh,0) rotate(360deg)}}
@keyframes particle-up{to{transform:translate3d(var(--drift),-125vh,0) rotate(-280deg)}}
@keyframes particle-diagonal{to{transform:translate3d(35vw,125vh,0) rotate(420deg)}}
.particle-image-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.particle-image-slot{border:1px solid var(--border);border-radius:9px;padding:10px}
.particle-image-slot img{display:block;width:100%;height:90px;object-fit:contain;background:#f5f5f5;margin-bottom:7px}
.resource-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.resource-row a{overflow-wrap:anywhere}
.draft-help{margin:-3px 0 8px}
.draft-file-buttons{gap:5px}
.resource-mode{border:1px solid var(--border);border-radius:9px;margin:12px 0;padding:8px 12px}
.resource-mode legend{font-size:12px;color:var(--muted);padding:0 5px}
.editor .ad-heading-row{display:flex;align-items:baseline;gap:.65em;flex-wrap:wrap;margin-bottom:8px}
.editor .ad-heading-row .ad-label,.editor .ad-heading-row h3{margin:0}
@media(max-width:760px){.particle-image-slots{grid-template-columns:1fr}.extra-feature-button{right:10px;bottom:10px}}

/* v0.7.2: 段落を押し下げない安定した挿入ライン */
.editor{position:relative}
.insert-marker{
  height:0!important;
  min-height:0!important;
  margin:0!important;
  overflow:visible!important;
}
.insert-marker::before{top:0!important}
.insert-marker button{top:0!important}

/* v0.8.7: keep the delayed insertion control clickable */
.insert-marker.is-visible button,
.insert-marker.is-active button{
  z-index:30!important;
  min-height:28px!important;
  padding:3px 12px!important;
}

/* v0.8.1: right sidebar utilities */
.extra-feature-button{
  position:static;
  right:auto;
  bottom:auto;
  z-index:auto;
  box-shadow:none;
}

/* v0.8.2: one canonical line model for editor and every export */
.editor > .mail-paragraph,
.editor .header-body > .editor-inner-paragraph,
.editor .footer-body > .editor-inner-paragraph,
.editor .ad-body > .editor-inner-paragraph,
.editor .heading-title > .editor-inner-paragraph{
  margin:0!important;
  line-height:1.5!important;
}

/* v0.10.1: make paragraph breaks visible in the editor only */
.editor > .mail-paragraph:not(:last-child),
.editor .header-body > .editor-inner-paragraph:not(:last-child),
.editor .footer-body > .editor-inner-paragraph:not(:last-child),
.editor .ad-body > .editor-inner-paragraph:not(:last-child),
.editor .heading-title > .editor-inner-paragraph:not(:last-child){
  margin-bottom:1.05em!important;
}
.editor > .mail-paragraph:empty,
.editor .editor-inner-paragraph:empty{
  min-height:1.5em!important;
}

/* v0.8.5: preview rhythm and creator credit */
.preview-mail-body{
  line-height:1.5!important;
}
.preview-mail-body p{
  margin:0!important;
  line-height:1.5!important;
}
.creator-credit{
  position:fixed;
  right:14px;
  bottom:10px;
  z-index:40;
  padding:4px 9px;
  border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:var(--brand-dark);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  pointer-events:none;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}