:root{--bg:#f8f5f0;--surface:#fff;--surface-2:#f0f4ef;--text:#263b33;--muted:#53655b;--accent:#6e8b77;--accent-2:#d6c9b7;--accent-strong:#3b6b54;--on-accent:white;--border:#dde3db;--focus:#386b57;--danger:#9f3434;--warn:#8a6024;--ok:#327243;--warn-bg:#faf3e6;--danger-bg:#ffebeb;--ok-bg:#e7f4e7;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--r:12px}
*{box-sizing:border-box}body{background:#f7f4ef;color:#263b33;margin:0;font:15px/1.5 Inter,Arial,sans-serif}body>.head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px clamp(20px,4vw,55px);background:#1c453b;color:#f7f2e9}.head h1{font:500 clamp(28px,3vw,42px) Cormorant Garamond,Georgia,serif;line-height:1.15;margin:8px 0}.head p{margin:0;color:#d7e4da}.back{color:#e7f0e6;font-size:13px;text-decoration:none}.head-mark{font:60px Great Vibes,Georgia,serif;color:#ccb79c}.page{max-width:1730px;margin:0 auto;display:grid;grid-template-columns:clamp(295px,24vw,350px) minmax(0,1fr);gap:20px;padding:20px}.setup,.workspace{background:white;border:1px solid #e7e8e2;border-radius:15px;box-shadow:0 8px 28px #253a2811}.setup{padding:24px;align-self:start}.setup h2,.work-heading h2{font:600 28px Cormorant Garamond,Georgia,serif;margin:0 0 14px}.setup label{display:block;font-size:12px;font-weight:600;margin:16px 0 5px}.setup select,.setup input:not([type=color]),.setup textarea{border:1px solid #c7d6cd;border-radius:8px;width:100%;font:14px Inter,Arial,sans-serif;padding:11px;background:white;color:#263b33;max-width:none}.setup select,.setup input{min-height:44px}.setup textarea{resize:vertical;min-height:110px}.layout-demo{display:flex;justify-content:space-around;align-items:center;background:#f5f7f3;border-radius:9px;padding:12px 7px;margin-top:7px;min-height:58px}.layout-icon{border:2px solid #769281;box-shadow:inset 0 0 0 3px white,inset 0 0 0 4px #d1b88b;background:#fbf9f3}.layout-icon.portrait{width:25px;height:36px}.layout-icon.landscape{width:43px;height:28px}.layout-icon.open{width:43px;height:28px;background:linear-gradient(90deg,#fbf9f3 49%,#c7af8c 49% 51%,#fbf9f3 51%)}.layout-icon.square{width:31px;height:31px}.palette-pills{display:grid;grid-template-columns:repeat(6,1fr);column-gap:12px;row-gap:13px;padding:8px 0}.color-pill{border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #a6b4a8;width:31px;height:31px;padding:0;cursor:pointer}.color-pill.active{outline:3px solid #214f3e}.custom-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;background:#f8faf7;border:1px solid #e0e9df;border-radius:10px;padding:11px}.custom-colors label{margin:0;font-size:11px}.custom-colors input[type=color]{display:block;border:1px solid #b6c5b6;border-radius:5px;padding:2px;height:41px;width:100%;margin-top:4px;cursor:pointer}.media-actions{display:grid;gap:8px;margin:20px 0 12px}.media-actions button,.full-preview,.gif-box button{background:#edf3ee;border:1px solid #bfd3c3;color:#28543e;border-radius:8px;padding:11px;font:600 12px Inter,Arial,sans-serif;cursor:pointer}.media-actions button:first-child,.full-preview{background:#2d604b;border-color:#2d604b;color:white}.full-preview{width:100%;margin-top:20px}.note{color:#64736a;font-size:12px;line-height:1.5}.gif-box{margin-top:22px;padding:15px;border:1px solid #e2d8cc;background:#fbf8f5;border-radius:11px}.gif-box strong{font:600 19px Cormorant Garamond,Georgia,serif}.gif-box p{font-size:12px;color:#58685e}.workspace{padding:18px;min-width:0}.work-heading{text-align:center}.work-heading h2{margin:0}.work-heading p{font-size:12px;color:#68746e;margin:0 0 15px}#actualEditor{min-width:0}#actualEditor .editor-body{grid-template-columns:minmax(350px,1fr) 315px;gap:14px}#actualEditor .stage{background:repeating-conic-gradient(#f0f1ed 0% 25%,white 0% 50%) 50%/20px 20px;padding:14px!important;min-height:200px;display:flex;justify-content:center;align-items:flex-start;overflow:hidden}#actualEditor .inspector{position:static;max-height:none;padding:14px;gap:10px}#actualEditor .editor-toolbar{position:static;background:#fafbf8;padding:10px;gap:6px}#actualEditor .editor-toolbar .pill,#actualEditor .editor-toolbar>button.primary{display:none}#actualEditor .editor-toolbar .btn{font-size:11px;padding:8px 10px}#actualEditor .tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#actualEditor .insp-group{padding:10px}#actualEditor .insp-label{font-size:11px}#actualEditor .stage-inner{margin:6px auto}#actualEditor .safe-guide::after{border-color:rgba(100,117,102,.30)}#actualEditor .inspector .row{flex-wrap:wrap}#actualEditor .file-btn{cursor:pointer}#actualEditor .stage-col>p.hint{font-size:10px}#actualEditor .editor-banner{display:none}#previewModal[hidden]{display:none}#previewModal{position:fixed;inset:0;background:rgba(22,35,30,.88);z-index:500;display:flex;align-items:center;justify-content:center;padding:25px}#previewModal .preview-content{position:relative;max-width:96vw;max-height:96vh}#modalImage{display:block;max-width:96vw;max-height:92vh;object-fit:contain;box-shadow:0 12px 50px #0005}#closePreview{position:absolute;top:-15px;right:-15px;background:white;border:0;border-radius:50%;font-size:23px;width:38px;height:38px;cursor:pointer}.toast{z-index:900}
@media(max-width:1280px){.page{grid-template-columns:310px minmax(0,1fr)}#actualEditor .editor-body{grid-template-columns:1fr}#actualEditor .inspector{max-height:none}}@media(max-width:850px){.page{grid-template-columns:1fr}.setup{order:1}.workspace{order:2}#actualEditor .editor-body{grid-template-columns:1fr}.palette-pills{grid-template-columns:repeat(9,1fr)}}@media(max-width:520px){.page{padding:10px}.setup,.workspace{padding:14px}.palette-pills{grid-template-columns:repeat(6,1fr)}.head-mark{display:none}.editor-toolbar{gap:4px!important}}

.head h1{color:#f7f2e9!important}.workspace .work-heading h2{color:#253e34}#actualEditor .editor-toolbar .btn{white-space:nowrap}

/* Elegant, accessible curated colors: one shade per button, spacious, custom pickers always available. */
.palette-pills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 22px;justify-items:center;padding:14px 6px 18px;}
.color-pill{width:43px;height:43px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #9daea5;transition:transform .15s ease;}
.color-pill.active{outline:3px solid #315d49;outline-offset:3px;}
.color-pill:focus-visible{outline:3px solid #274d40;outline-offset:4px;}
.custom-colors{gap:12px;padding:13px;background:#f8f7f4;}
.custom-colors input[type=color]{height:48px;border:1px solid #a6bbac;border-radius:8px;padding:3px;}
@media(max-width:850px){.palette-pills{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:520px){.palette-pills{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Polished message chooser, parity across both languages. */
.message-switch{display:block;width:100%;margin-top:9px;margin-bottom:14px;padding:12px 15px;border:1px solid #b5cabe;border-radius:9px;background:#f1f7f2;color:#285c47;font:600 13px/1.3 Inter,Arial,sans-serif;cursor:pointer;min-height:46px;}
.message-switch:hover,.message-switch:focus-visible{background:#e1f0e6;border-color:#6a9e7d;outline-offset:2px;}


/* iPhone Card Design QA: keep each template label inside its border. */
@media (max-width: 600px) {
  #actualEditor .inspector, #actualEditor .inspector .insp-group {
    box-sizing: border-box; min-width: 0; max-width: 100%;
  }
  #actualEditor .tpl-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; width: 100%; min-width: 0;
  }
  #actualEditor .tpl-grid .tpl {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; box-sizing: border-box; min-width: 0;
    width: 100%; min-height: 104px; height: auto;
    padding: 12px 7px; gap: 9px; font-size: 13px;
    line-height: 1.25; font-weight: 600; text-align: center;
    white-space: normal; overflow-wrap: anywhere;
    word-break: normal; text-wrap: balance;
  }
  #actualEditor .tpl-grid .tpl-sw {
    width: 31px; height: 39px; flex: 0 0 auto; margin: 0;
  }
}


/* Layout preview images are the actual selection controls (not merely decoration). */
#format.format-internal-select{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;clip-path:inset(50%)!important;pointer-events:none!important;}
.layout-demo.layout-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;margin:9px 0 12px;background:transparent;min-height:0;}
.layout-picker .layout-choice{min-width:0;min-height:107px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:11px 7px;background:#fff;border:1px solid #c7d4cb;border-radius:12px;color:#273f34;font:600 13px/1.25 Inter,Arial,sans-serif;cursor:pointer;transition:background .15s,border-color .15s;box-shadow:none;white-space:normal;}
.layout-picker .layout-choice .layout-icon{display:block;flex:0 0 auto;box-sizing:border-box;margin:0;}
.layout-picker .layout-choice-label{display:block;text-align:center;overflow-wrap:anywhere;max-width:100%;}
.layout-picker .layout-choice[aria-pressed="true"]{border:2px solid #2f624f;background:#edf5ee;box-shadow:0 0 0 2px rgba(47,98,79,.1);}
.layout-picker .layout-choice:focus-visible{outline:3px solid #315e4d;outline-offset:3px;}
@media(hover:hover){.layout-picker .layout-choice:hover{background:#f4f8f4;border-color:#759b82}}
@media(max-width:350px){.layout-picker .layout-choice{font-size:12px;min-height:99px;gap:8px;padding:9px 4px}}