/* ============ MAKE A CARD — editor (archival index style) ============ */
.mk-intro{font-size:14px;color:var(--ink-soft);max-width:64ch;line-height:1.9;margin-bottom:46px}
.mk-intro b{color:var(--ink)}

.mk{display:grid;grid-template-columns:408px 1fr;gap:22px 40px;align-items:start}

/* ---------- left: tools ---------- */
.mk-tools{display:flex;flex-direction:column;gap:14px;grid-column:1;grid-row:1}
.mk-tool{border:1px solid var(--ink);background:var(--paper)}
.mk-tool>summary{
  display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;
  list-style:none;user-select:none;transition:background .25s;
}
.mk-tool>summary::-webkit-details-marker{display:none}
.mk-tool>summary:hover{background:var(--paper-2)}
.mk-tool[open]>summary{background:var(--ink);color:var(--paper)}
.mk-tool[open]>summary .mk-tool-no{color:var(--accent)}
.mk-tool-no{font-family:var(--caveat);font-size:22px;font-weight:700;color:var(--accent)}
.mk-tool-t{flex:1;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.mk-tool-t em{display:block;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--grey);margin-top:3px}
.mk-tool[open]>summary .mk-tool-t em{color:#b9b0a0}
.mk-tool-ar{font-size:16px;font-weight:400;transition:transform .35s}
.mk-tool[open] .mk-tool-ar{transform:rotate(45deg)}
.mk-tool-body{padding:18px;display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--ink)}

.mk-field{display:flex;flex-direction:column;gap:7px}
.mk-field>span,.mk-ctl-l{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.mk-field input,.mk-field textarea,.mk-form input,.mk-form textarea{
  width:100%;border:1px solid var(--line);background:#fff;padding:10px 12px;
  font-family:var(--archivo);font-size:13px;color:var(--ink);border-radius:4px;
  transition:border-color .25s;resize:none;
}
.mk-field input:focus,.mk-field textarea:focus,.mk-form input:focus,.mk-form textarea:focus{
  outline:none;border-color:var(--ink);
}
.mk-ctlrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mk-ctlrow .mk-ctl-l{flex:0 0 52px}

.mk-chiprow{display:flex;gap:7px;flex-wrap:wrap}
.mk-chip{
  border:1px solid var(--ink);background:none;padding:7px 13px;border-radius:999px;
  font-family:var(--archivo);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--ink);cursor:pointer;transition:background .22s,color .22s;white-space:nowrap;
}
.mk-chip:hover{background:var(--paper-2)}
.mk-chip.on{background:var(--ink);color:var(--paper)}
.mk-chip.warn{background:var(--accent);border-color:var(--accent);color:#fff}

.mk-swatches{display:flex;gap:9px;flex-wrap:wrap}
.mk-dot{
  width:26px;height:26px;border-radius:50%;background:var(--c);cursor:pointer;
  border:1px solid rgba(28,24,21,.35);padding:0;transition:transform .22s;position:relative;
}
.mk-dot:hover{transform:scale(1.14)}
.mk-dot.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}

.mk-bgsw{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mk-bgsw button{
  border:1px solid var(--ink);background:var(--c);cursor:pointer;border-radius:4px;
  padding:16px 6px 9px;font-family:var(--archivo);font-size:10px;font-weight:800;
  letter-spacing:.12em;color:var(--t,var(--ink));text-align:center;transition:transform .22s;
}
.mk-bgsw button:hover{transform:translateY(-2px)}
.mk-bgsw button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.mk-gradsw{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.mk-gradsw button{
  border:1px solid var(--ink);background:var(--g);cursor:pointer;border-radius:4px;height:56px;
  font-family:var(--archivo);font-size:10px;font-weight:800;letter-spacing:.12em;
  color:var(--t,var(--ink));transition:transform .22s;padding:0 4px;
}
.mk-gradsw button:hover{transform:translateY(-2px)}
.mk-gradsw button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.mk-patsw{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.mk-patsw button{
  border:1px solid var(--ink);cursor:pointer;border-radius:4px;height:56px;padding:0;
  background-color:#f6f1e7;transition:transform .22s;position:relative;overflow:hidden;
}
.mk-patsw button:hover{transform:translateY(-2px)}
.mk-patsw button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.mk-patsw button span{
  position:absolute;left:0;right:0;bottom:5px;font-size:9px;font-weight:800;
  letter-spacing:.1em;color:var(--ink);text-align:center;
}
.mk-pane{display:none}
.mk-pane.on{display:block}

.mk-upload{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px dashed var(--ink);border-radius:4px;padding:14px;cursor:pointer;
  font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink);
  transition:background .25s;background:#fff;
}
.mk-upload:hover{background:var(--paper-2)}
.mk-upload input{display:none}

.mk-stcats{display:flex;flex-direction:column;gap:14px}
.mk-stcat-t{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.mk-stgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mk-stgrid button{
  border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:7px;
  transition:transform .2s,border-color .2s;
}
.mk-stgrid button:hover{transform:translateY(-2px) rotate(-3deg);border-color:var(--ink)}
.mk-stgrid button svg{width:100%;height:100%}

.mk-tpls{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.mk-tpl{
  border:1px solid var(--ink);background:#fff;border-radius:4px;cursor:pointer;
  padding:12px 10px;text-align:left;font-family:var(--archivo);transition:transform .2s,background .2s;
}
.mk-tpl:hover{transform:translateY(-2px)}
.mk-tpl b{display:block;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.mk-tpl span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--grey);margin-top:3px;text-transform:uppercase}
.mk-tpl.on{background:var(--ink)}
.mk-tpl.on b{color:var(--paper)}
.mk-tpl.on span{color:#b9b0a0}

.mk-tip{font-size:11.5px;color:var(--grey);line-height:1.7}

/* ---------- right: stage ---------- */
.mk-stage{display:flex;flex-direction:column;gap:18px;min-width:0;grid-column:2;grid-row:1}
.mk-stage-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--ink);padding-bottom:12px;
}
.mk-stage-t{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.mk-live{
  background:none;border:none;cursor:pointer;font-family:var(--archivo);
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;padding:4px 0;transition:opacity .2s;
}
.mk-live:hover{opacity:.65}
.mk-live svg{display:block}

.mk-cardbox{
  position:relative;background:var(--paper-2);border:1px solid var(--line);
  padding:26px 20px;overflow:hidden;
}
/* crop marks */
.mk-cardbox::before,.mk-cardbox::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
}
.mk-cardbox::before{top:10px;left:10px;border-top:1.5px solid var(--grey);border-left:1.5px solid var(--grey)}
.mk-cardbox::after{bottom:10px;right:10px;border-bottom:1.5px solid var(--grey);border-right:1.5px solid var(--grey)}
.mk-fit{position:absolute;top:26px;left:calc(50% - 210px);width:420px;height:588px;transform-origin:top center}

/* ---------- the card ---------- */
.mk-card{
  position:absolute;inset:0;border-radius:10px;overflow:hidden;
  box-shadow:0 20px 46px rgba(28,24,21,.2),0 3px 10px rgba(28,24,21,.1);
  background:#f6f1e7;touch-action:none;user-select:none;
}
.mk-card.landscape{}
.mk-bg{position:absolute;inset:0}
.mk-bg img{width:100%;height:100%;object-fit:cover}
.mk-card.grainy .mk-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
.mk-card.stampframe .mk-frame{
  position:absolute;inset:14px;border:2px dashed rgba(28,24,21,.5);border-radius:4px;pointer-events:none;
}
.mk-layer{position:absolute;inset:0}

.mk-t-el{position:absolute;transform:translate(-50%,-50%);max-width:82%;cursor:default}
.mk-t-in{white-space:pre-wrap;word-break:break-word;line-height:1.28}
.mk-t-el[data-el="title"] .mk-t-in{font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
.mk-t-el[data-el="body"] .mk-t-in{font-weight:500}
.mk-t-el[data-el="from"] .mk-t-in,.mk-t-el[data-el="sign"] .mk-t-in{font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.mk-t-el.note .mk-t-in{
  background:#fff;padding:13px 16px;border-radius:2px;
  box-shadow:0 8px 20px rgba(28,24,21,.16);font-weight:500;
}

/* ---------- stickers on card ---------- */
.mk-st{
  position:absolute;transform:translate(-50%,-50%);cursor:grab;
  touch-action:none;
}
.mk-st:active{cursor:grabbing}
.mk-st svg{width:100%;height:100%;display:block;pointer-events:none}
.mk-st-del,.mk-st-rot,.mk-st-scale{position:absolute;display:none;align-items:center;justify-content:center}
.mk-st.sel .mk-st-del,.mk-st.sel .mk-st-rot,.mk-st.sel .mk-st-scale{display:flex}
.mk-st-del{
  top:3px;right:3px;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:var(--paper);border:none;cursor:pointer;
  font-size:11px;line-height:1;padding:0;font-family:var(--archivo);
}
.mk-st-del:hover{background:var(--accent)}
.mk-st-rot{
  bottom:3px;left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink);cursor:grab;
}
.mk-st-scale{
  right:3px;bottom:3px;width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:1.5px solid var(--ink);cursor:nwse-resize;
}
.mk-st.sel{outline:1.5px dashed rgba(200,69,44,.75);outline-offset:5px;border-radius:4px}

/* ---------- actions & send ---------- */
.mk-actions{display:flex;gap:10px;flex-wrap:wrap}
.mk-act{
  flex:1;min-width:150px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--ink);background:none;border-radius:999px;padding:13px 18px;cursor:pointer;
  font-family:var(--archivo);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);transition:transform .22s,background .22s,color .22s;
}
.mk-act:hover{transform:translateY(-2px);background:var(--ink);color:var(--paper)}

.mk-send{border:1px solid var(--ink);background:var(--paper);padding:22px;grid-column:2;grid-row:2}
.mk-step{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.mk-step-s1{margin-bottom:10px}
.mk-step-s3{margin-top:20px;margin-bottom:10px}
.mk-step-s3 .mk-step-no::before{content:""}
.mk-step-s3{justify-content:center}
.mk-step-no{font-family:var(--caveat);font-size:22px;font-weight:700;color:var(--accent)}
.mk-step-t{font-size:13px;font-weight:800;letter-spacing:.1em}
.mk-form{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.mk-sendbtns{display:flex;gap:10px;flex-wrap:wrap}
.mk-send-btn{
  flex:1;min-width:180px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:999px;
  padding:15px 20px;cursor:pointer;font-family:var(--archivo);
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  transition:transform .22s,background .22s,border-color .22s;
}
.mk-send-btn:hover{transform:translateY(-2px);background:var(--accent);border-color:var(--accent)}
.mk-send-btn svg{display:block}
.mk-send-btn:disabled{opacity:.55;cursor:wait;transform:none}
.mk-send-alt{
  border:1px solid var(--ink);background:none;color:var(--ink);border-radius:999px;
  padding:15px 20px;cursor:pointer;font-family:var(--archivo);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  transition:background .22s,color .22s;white-space:nowrap;
}
.mk-send-alt:hover{background:var(--ink);color:var(--paper)}
.mk-fine{font-size:11px;color:var(--grey);line-height:1.7;margin-top:13px}
.mk-fallback{
  display:inline-block;margin-top:9px;font-size:12px;font-weight:700;
  color:var(--accent);text-decoration:underline;cursor:pointer;
  border:0;background:none;padding:0;font-family:var(--archivo);text-align:left;
}
.mk-fallback[hidden]{display:none}
.mk-mail-note{font-size:11px;color:var(--grey);margin-top:9px;line-height:1.75}
.mk-mail-note b{font-weight:800;color:var(--ink);word-break:break-all}
.mk-err{
  margin:0;padding:8px 11px;border-radius:4px;font-size:11.5px;font-weight:700;
  color:#8c2f1f;background:#fbeee9;border:1px solid #e8c6bb;line-height:1.6;
}
.mk-err[hidden]{display:none}
.mk-form input.is-bad,.mk-form textarea.is-bad{border-color:#c0563c;background:#fff8f6}

/* ---------- live preview modal ---------- */
.mk-modal{
  position:fixed;inset:0;z-index:5000;background:rgba(22,19,16,.93);
  display:none;align-items:center;justify-content:center;padding:34px;
}
.mk-modal.open{display:flex}
.mk-modal-in{position:relative}
.mk-modal-close{
  position:absolute;top:-44px;right:0;background:none;border:none;color:var(--paper);
  font-family:var(--archivo);font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;
}
.mk-modal-close:hover{color:var(--accent)}
.mk-modal-cap{
  position:absolute;left:0;bottom:-40px;right:0;text-align:center;
  color:#b9b0a0;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* 单列：Step 01 预览 -> 工具 -> Step 02/03 留言发送 */
  .mk-act{font-size:10px;letter-spacing:.1em;padding:14px 12px;white-space:nowrap;gap:6px}
  .mk{display:flex;flex-direction:column;align-items:stretch;gap:22px}
  .mk-step-s1{margin-bottom:0}
  .mk-stgrid{grid-template-columns:repeat(8,1fr)}
}
@media (max-width:720px){
  .mk-modal{padding:22px 16px}
  .mk-modal-close{top:-36px;font-size:10.5px;letter-spacing:.14em}
  .mk-modal-cap{bottom:-34px;font-size:9.5px;letter-spacing:.1em;white-space:nowrap}
  .mk-stgrid{grid-template-columns:repeat(5,1fr)}
  .mk-cardbox{padding:18px 12px}
  .mk-send{padding:16px}
  .mk-bgsw{grid-template-columns:repeat(2,1fr)}
}