/* Editor UI. Content inside .post-body is styled by blog.css so it matches the live post. */
.admin{background:var(--cream-soft); font-size:15px;}
.admin button, .admin select{font:inherit;}
.admin button:not(.btn-primary):not(.link-btn):not(.sw){
  background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:7px 14px; min-height:38px;
  color:var(--ink); cursor:pointer; transition:background .2s ease, border-color .2s ease;
}
.admin button:not(.btn-primary):not(.link-btn):not(.sw):hover{border-color:var(--terracotta); background:#fff;}
.admin button.btn-primary{padding:9px 22px; font-size:.95rem; box-shadow:none; min-height:38px;}
.admin button[disabled]{opacity:.45; cursor:default;}
.link-btn{background:none; border:0; color:var(--terracotta); cursor:pointer; text-decoration:none; padding:6px 4px; font-weight:500;}
.link-btn:hover{text-decoration:underline;}
.admin select, .admin input[type=datetime-local], .admin input[type=password]{
  font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; min-height:40px; width:100%;
}
.admin input[type=text], .admin input[type=email], .admin input[type=tel], .admin textarea{border-radius:10px; padding:8px 12px; min-height:40px; font-size:.95rem;}
.admin label{font-size:.85rem;}
.admin input[type=range]{width:100%; accent-color:var(--terracotta);}
.hint{font-size:.85rem; color:var(--ink-soft);}
.fld{display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:500; color:var(--ink-soft);}
[hidden]{display:none !important;}

/* login */
.login{
  max-width:380px; margin:12vh auto; background:var(--paper); border-radius:20px; padding:36px 32px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px;
}
.login h1{font-size:1.6rem;}

/* top bar + tabs */
.adm-bar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:var(--paper); border-bottom:1px solid var(--line); padding:10px 24px;
}
.adm-tabs{display:flex; gap:6px; flex-wrap:wrap; flex:1;}
.adm-tabs button.is-on{background:var(--terracotta) !important; border-color:var(--terracotta) !important; color:var(--paper) !important;}
.adm-end{display:flex; align-items:center; gap:14px;}
.adm-end a{color:var(--ink-soft);}
.badge{background:var(--terracotta); color:var(--paper); border-radius:999px; padding:1px 8px; font-size:.75rem; font-weight:700;}
.is-on .badge{background:var(--paper); color:var(--terracotta);}

.adm-page{max-width:1000px; margin:0 auto; padding:32px 24px 80px;}
.adm-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.adm-head h1{font-size:1.7rem;}
.item{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin-bottom:10px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.item-main{flex:1; min-width:220px;}
.item-main strong{display:block; font-size:1.02rem;}
.item-main p{white-space:pre-wrap; overflow-wrap:anywhere; margin:6px 0;}
.item small{color:var(--ink-soft);}
.item-thumb{width:64px; height:48px; border-radius:8px; object-fit:cover; background:var(--sage-soft);}
.item .row{display:flex; gap:8px; flex-wrap:wrap;}
.pill{font-size:.75rem; font-weight:600; padding:2px 10px; border-radius:999px; background:var(--cream-soft); color:var(--ink-soft);}
.pill.ok{background:var(--sage-soft); color:var(--sage);}
.pill.wait{background:#F6E3D6; color:var(--terracotta-deep);}
.sub-add{display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:12px; align-items:end; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:20px;}
.sub-add .check{grid-column:1 / 3;}
.site-form{display:flex; flex-direction:column; gap:16px; max-width:620px;}

/* editor */
.ed-bar{
  position:sticky; top:var(--adm-h, 59px); z-index:40; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--cream); border-bottom:1px solid var(--line); padding:8px 24px;
}
.ed-group{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.ed-group button:not(.sw){min-width:38px; padding:6px 10px !important;}
.ed-actions{margin-inline-start:auto;}
.ed-label{font-size:.8rem; color:var(--ink-soft); margin-inline-start:6px;}
.ed-status{font-size:.85rem; color:var(--ink-soft);}
.sw-inline, .sw-row{display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center;}
.sw{width:22px; height:22px; border-radius:50%; border:1px solid rgba(51,54,59,.3); cursor:pointer; padding:0;}
.sw:hover, .sw.is-on{outline:2px solid var(--terracotta); outline-offset:1px;}
.sw-x{background:var(--paper); font-size:.7rem; line-height:1; color:var(--ink-soft);}
.sw-row input[type=color]{width:30px; height:26px; padding:0; border:1px solid var(--line); border-radius:6px; background:none; cursor:pointer;}

.ed-layout{display:grid; grid-template-columns:320px 1fr; align-items:start;}
.ed-side{
  position:sticky; top:calc(var(--adm-h, 59px) + var(--ed-h, 59px)); max-height:calc(100vh - var(--adm-h, 59px) - var(--ed-h, 59px)); overflow-y:auto; background:var(--paper);
  border-inline-end:1px solid var(--line); padding:8px 18px 60px;
}
.ed-side details{border-bottom:1px solid var(--line); padding:10px 0;}
.ed-side summary{font-family:var(--serif); font-weight:700; font-size:1.05rem; cursor:pointer; padding:6px 0;}
.ed-side details > div{display:flex; flex-direction:column; gap:12px; padding:8px 0 10px;}
.ed-side .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.cover-prev{aspect-ratio:16/10; border-radius:12px; background:var(--sage-soft) center/cover no-repeat; border:1px dashed var(--line);}
.thumbs{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;}
.thumbs div{position:relative;}
.thumbs img{aspect-ratio:1; object-fit:cover; border-radius:6px; width:100%;}
.thumbs button{position:absolute; top:2px; left:2px; min-height:0 !important; min-width:0 !important; padding:0 5px !important; font-size:.7rem; border-radius:50% !important;}

.ed-main{padding:28px 24px 120px; min-width:0;}
.ed-canvas{background:var(--paper); border-radius:18px; box-shadow:var(--shadow); padding:40px 0 30px; margin:0 auto; max-width:1100px; transition:max-width .3s ease;}
.ed-canvas.is-narrow{max-width:400px;}
.ed-canvas.is-narrow .cols, .ed-canvas.is-narrow .cols-3{grid-template-columns:1fr;}
.ed-canvas.is-narrow .blk figure{width:100% !important;}
.ed-title{max-width:820px; margin:0 auto; padding:0 20px; text-align:center; font-size:clamp(1.8rem, 3.4vw, 2.8rem); line-height:1.25; outline:none;}
.ed-canvas .post-body{padding-top:20px;}
[data-ph]:empty::before{content:attr(data-ph); color:rgba(51,54,59,.35); pointer-events:none;}
[contenteditable]{outline:none; min-height:1.2em;}
.ed-canvas a{pointer-events:none;}
.ed-canvas a [contenteditable]{pointer-events:auto; cursor:text;}
.ed-canvas .video iframe{pointer-events:none;}

.ed-blk{position:relative; padding:2px 0; border-radius:12px; outline:1.5px dashed transparent; outline-offset:4px; transition:outline-color .15s ease;}
.ed-blk > .blk:first-of-type{margin-top:28px;}
.ed-blk:hover{outline-color:var(--line);}
.ed-blk.is-sel{outline-color:var(--terracotta);}
.ed-tools{
  position:absolute; top:-6px; inset-inline-start:8px; z-index:5; display:none; align-items:center; gap:3px;
  background:var(--ink); border-radius:10px; padding:3px 6px; font-size:.8rem; line-height:1.4; text-align:start;
}
.ed-blk:hover > .ed-tools, .ed-blk.is-sel > .ed-tools, .ed-blk:focus-within > .ed-tools{display:flex;}
.ed-tools span{color:var(--cream); padding:0 6px; font-size:.75rem;}
.ed-tools button{
  background:none !important; border:0 !important; color:var(--cream) !important; min-height:26px !important; min-width:26px;
  padding:0 5px !important; border-radius:6px !important;
}
.ed-tools button:hover{background:rgba(255,255,255,.18) !important;}
.ed-tools [data-act=drag]{cursor:grab;}
.ed-blk.drop-before{box-shadow:0 -4px 0 var(--terracotta);}
.ed-blk.drop-after{box-shadow:0 4px 0 var(--terracotta);}
.img-empty{
  border:1.5px dashed var(--line); border-radius:14px; padding:38px 16px; text-align:center;
  color:var(--ink-soft); font-size:.95rem; background:var(--cream);
}
.add-menu{
  max-width:820px; margin:44px auto 0; padding:18px 20px 0; border-top:1px dashed var(--line);
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.9rem; color:var(--ink-soft);
}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%, 20px); z-index:300; background:var(--ink); color:var(--cream);
  padding:12px 22px; border-radius:12px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; max-width:90vw;
}
.toast.show{opacity:1; transform:translate(-50%, 0);}
.toast.err{background:#A23A1E;}

@media(max-width:900px){
  .ed-layout{grid-template-columns:1fr;}
  .ed-side{position:static; max-height:none; border:0; border-bottom:1px solid var(--line);}
  .ed-bar{position:static;}
  .sub-add{grid-template-columns:1fr;}
  .sub-add .check{grid-column:auto;}
}

/* ================= Editor.js integration ================= */
.ed-body{padding-top:8px;}
.tool-root{display:contents;}
.codex-editor{position:relative; z-index:0;}
/* Blocks are flex items of one row-wrapping container, exactly like .sec-in on the live site. */
.codex-editor__redactor{display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; isolation:isolate; padding:0 20px 80px !important; margin:0 !important;}
.ce-block{position:relative; --f:1; width:calc(min(100%, var(--cw, 788px)) * var(--f)); border-radius:10px;}
.ce-block:has(.w-3-4){--f:.75;}
.ce-block:has(.w-2-3){--f:.66666;}
.ce-block:has(.w-1-2){--f:.5;}
.ce-block:has(.w-1-3){--f:.33333;}
.ce-block:has(.w-1-4){--f:.25;}
/* Each block paints its own slice of the section band, behind all block content. */
.ce-block::before{content:''; position:absolute; top:0; bottom:0; left:-100vmax; right:-100vmax; background:var(--sec-bg, transparent); z-index:-1; pointer-events:none;}
.ce-block__content, .ce-toolbar__content{max-width:none; margin:0;}
.ce-block .blk{flex:none; max-width:none; width:auto; padding-bottom:1px;}
.ce-block.is-sel > .ce-block__content{outline:1.5px dashed var(--terracotta); outline-offset:-2px; border-radius:10px;}
.ce-block:hover > .ce-block__content{outline:1.5px dashed var(--line); outline-offset:-2px; border-radius:10px;}
.ce-block.is-sel:hover > .ce-block__content{outline-color:var(--terracotta);}
.ce-block--selected .ce-block__content{background:rgba(150,80,31,.08);}
.ce-block.sec-dark{--ink:#FBF8F2; --ink-soft:rgba(251,248,242,.82); --line:rgba(251,248,242,.24); color:var(--ink);}
.ce-block.sec-dark :is(.h-kicker, .rt a, .motif, .stat-num, .div-cn, .feat-icon, cite){color:var(--terracotta-on-dark);}
.ce-block.is-sec-mark{--f:1 !important; width:100%;}
.ce-block.is-sec-mark{padding-top:var(--prev-pad, 0px); padding-bottom:var(--own-pad, 0px);}
.ce-block.is-sec-mark::after{content:''; position:absolute; top:0; height:var(--prev-pad, 0px); left:-100vmax; right:-100vmax; background:var(--prev-bg, transparent); z-index:-1; pointer-events:none;}
.ce-block.is-sec-mark .blk{margin-top:0; padding:0;}
.ed-canvas .blk a[class^="btn-"]{text-decoration:none;}
.sec-mark{
  display:flex; align-items:center; gap:14px; justify-content:center; padding:7px 16px; font-family:var(--sans); font-size:.8rem;
  border-top:2px dashed var(--terracotta); color:var(--terracotta); background:rgba(251,248,242,.85); cursor:pointer; user-select:none;
}
.sec-mark span{font-weight:700;}
.sec-mark small{color:#5B5E63;}
.ed-canvas .blk a{pointer-events:none;}
.ed-canvas .blk a [contenteditable]{pointer-events:auto; cursor:text;}
.ed-canvas .video iframe, .ed-canvas .sub-form{pointer-events:none;}
.ed-canvas .faq-q{cursor:text;}
.tb-ic{display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; font-size:15px; font-style:normal;}
.mk-ic{background:#FFF3B0; padding:0 4px; border-radius:3px; font-weight:700;}
.codex-editor .ce-toolbar__actions{right:calc(var(--tbx, 0px) + 6px) !important; left:auto !important; padding:0 !important; gap:4px; top:0;}
.ce-toolbar__plus, .ce-toolbar__settings-btn{background:var(--paper); border:1px solid var(--line); border-radius:8px; color:var(--ink);}
.ce-popover{--color-background-item-hover:var(--sage-soft);}
.admin .ce-popover button, .admin .ce-toolbar button, .admin .ce-inline-toolbar button{min-height:0 !important; border:0 !important; background:none; padding:0;}
.ce-inline-toolbar, .ce-popover{direction:rtl; font-family:var(--sans); z-index:60;}
.panel-h{font-family:var(--serif); font-size:1rem; margin-top:8px; padding-top:12px; border-top:1px solid var(--line);}
.preset-row{display:flex; flex-wrap:wrap; gap:6px;}
.admin button.preset{width:34px; height:34px; min-height:0 !important; padding:0 !important; border-radius:9px !important; border:1px solid rgba(51,54,59,.25) !important;}
.add-menu span{font-size:.85rem;}

/* modals: template library, media library, preview, checklist */
.adm-modal{z-index:200; align-items:flex-start; padding:4vh 20px;}
.adm-modal .modal-panel{max-width:560px; max-height:92vh;}
.adm-modal .modal-panel.is-wide{max-width:1180px;}
.adm-modal .modal-header{padding:26px 30px 0 84px;}
.adm-modal .modal-scroll{padding:0 30px 30px;}
.lib-bar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px;}
.lib-cats{margin-bottom:18px;}
.lib-cats .chip{min-height:34px !important; border-radius:999px !important; padding:4px 14px !important; font-size:.82rem;}
.lib-cats .chip.is-on{background:var(--terracotta) !important; color:var(--paper) !important; border-color:var(--terracotta) !important;}
.tpl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:18px;}
.tpl{display:flex; flex-direction:column; gap:8px; padding:8px; border:1px solid var(--line); border-radius:14px; text-align:center; background:var(--cream); cursor:pointer; transition:box-shadow .2s ease, border-color .2s ease;}
.tpl:hover, .tpl:focus-visible{box-shadow:var(--shadow); border-color:var(--terracotta); outline:none;}
.tpl-prev{height:190px; overflow:hidden; border-radius:9px; background:var(--paper); position:relative; pointer-events:none;}
/* live miniature: the real blocks rendered at 1000px and scaled down */
.tpl-scale{width:1000px; transform:scale(.25); transform-origin:top right; padding-top:0 !important; text-align:right;}
.tpl-scale .reveal{opacity:1 !important; transform:none !important; filter:none !important;}
.tpl-scale .sec-bg:first-child{margin-top:0;}
.tpl-blank .tpl-prev{display:flex; align-items:center; justify-content:center;}
.tpl-plus{font-size:3rem; color:var(--terracotta);}
.tpl-del{grid-column:1 / -1; text-align:start; margin-top:-12px;}
.tpl-save{grid-column:1 / -1;}
.media-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px;}
.media-item{position:relative;}
.media-item img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; cursor:pointer; border:2px solid transparent;}
.media-item img:hover{border-color:var(--terracotta);}
.media-item button{position:absolute; top:6px; left:6px; min-height:0 !important; padding:1px 7px !important; border-radius:50% !important; font-size:.75rem;}
.pv-bar{justify-content:center;}
.pv-bar button.is-on{background:var(--terracotta) !important; color:var(--paper) !important; border-color:var(--terracotta) !important;}
.pv-wrap{background:var(--cream-soft); border-radius:14px; padding:14px; display:flex; justify-content:center;}
.pv-frame{width:100%; height:68vh; border:0; border-radius:10px; background:#fff; box-shadow:var(--shadow); transition:width .3s ease;}
.check-list{margin:10px 0 22px; padding-right:1.3em; display:flex; flex-direction:column; gap:8px;}
.stack{display:flex; flex-direction:column; gap:10px;}
.stack .row{justify-content:space-between;}

/* ================= round 2: comfortable controls ================= */
.ic{display:inline-flex; vertical-align:-.2em;}
.ic svg, .icon-btn svg{width:18px; height:18px; display:block;}
.admin button.icon-btn{min-width:38px; min-height:38px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center;}
.admin button.icon-btn.is-on{background:var(--terracotta) !important; color:var(--paper) !important; border-color:var(--terracotta) !important;}
.admin button:focus-visible, .admin [tabindex]:focus-visible, .admin select:focus-visible, .admin summary:focus-visible{outline:2.5px solid var(--terracotta); outline-offset:2px;}
.admin button.is-busy{position:relative; color:transparent !important; pointer-events:none;}
.admin button.is-busy::after{content:''; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid var(--terracotta); border-top-color:transparent; animation:spin .7s linear infinite;}
.admin button.btn-primary.is-busy::after{border-color:var(--paper); border-top-color:transparent;}
@keyframes spin{to{transform:rotate(360deg);}}
.admin button.btn-primary.is-danger{background:#A23A1E; box-shadow:none;}
.sw{width:28px; height:28px;}
.sw-x{display:inline-flex; align-items:center; justify-content:center;}
.sw-x svg{width:13px; height:13px;}
.ed-status.is-dirty{color:#A23A1E; font-weight:600;}
.ed-side{padding-bottom:120px;}

/* panel: header, tabs, groups */
.panel-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.panel-top strong{font-family:var(--serif); font-size:1.05rem;}
.panel-top .row{gap:4px;}
.panel-tabs{display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; background:var(--cream-soft); border-radius:12px; padding:4px;}
.admin .panel-tabs button{border:0 !important; background:none !important; min-height:36px; border-radius:9px !important; font-weight:600; color:var(--ink-soft) !important;}
.admin .panel-tabs button[aria-selected=true]{background:var(--paper) !important; color:var(--terracotta) !important; box-shadow:0 2px 8px -4px rgba(51,54,59,.4);}
.ed-side details.grp{border:1px solid var(--line); border-radius:12px; padding:0 12px;}
.ed-side details.grp > summary{font-family:var(--sans); font-size:.9rem; font-weight:600; padding:10px 0;}
.ed-side details.grp > div{padding:2px 0 12px;}
.warn-note{font-size:.82rem; color:#A23A1E; background:#F6E3D6; border-radius:8px; padding:8px 10px;}

/* option chips: text, live mini-previews, kits, icons */
.chips-row{display:flex; flex-wrap:wrap; gap:6px;}
.admin button.opt{min-height:34px !important; padding:4px 11px !important; border-radius:9px !important; font-size:.82rem;}
.admin button.opt.is-on{background:var(--terracotta) !important; color:var(--paper) !important; border-color:var(--terracotta) !important;}
.chips-row.is-visual{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px;}
.admin .is-visual button.opt{display:flex; flex-direction:column; gap:4px; padding:5px !important; height:auto; align-items:stretch; background:var(--cream) !important; color:var(--ink) !important;}
.admin .is-visual button.opt.is-on{background:var(--cream) !important; color:var(--terracotta) !important; border-color:var(--terracotta) !important; box-shadow:0 0 0 2px var(--terracotta);}
.opt-pv{display:block; height:66px; overflow:hidden; border-radius:6px; background:var(--paper); position:relative;}
.opt-scale{position:absolute; top:0; right:0; display:block; width:400px; transform:scale(.33); transform-origin:top right; padding:10px 0 0 !important; text-align:right; font-size:1.1rem !important;}
.opt-scale .blk{margin-top:0; flex:none; max-width:none;}
.opt-scale .reveal{opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important;}
.opt-l{font-size:.76rem; font-weight:600; text-align:center;}
.kit-dots{display:inline-flex; gap:3px; padding:0 !important; font-size:0 !important; margin-inline-end:6px; vertical-align:middle;}
.kit-dots i{width:11px; height:11px; border-radius:50%; background:var(--terracotta);}
.kit-dots i:nth-child(2){background:var(--sage);}
.kit-dots i:nth-child(3){background:var(--sage-soft); border:1px solid rgba(51,54,59,.2);}
.seg{display:inline-flex; gap:4px;}
.admin .seg button.opt{min-width:40px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center;}
.seg svg{width:17px; height:17px;}
.rng{display:grid; grid-template-columns:1fr 46px 34px; gap:6px; align-items:center;}
.rng output{font-size:.8rem; text-align:center; font-variant-numeric:tabular-nums; background:var(--cream-soft); border-radius:7px; padding:4px 2px; color:var(--ink);}
.admin .rng button.icon-btn{min-width:34px; min-height:34px;}
.rng svg{width:15px; height:15px;}
.icon-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;}
.admin .icon-grid button.opt{padding:0 !important; min-height:36px !important; display:flex; align-items:center; justify-content:center;}
.icon-grid svg{width:19px; height:19px;}
.st-chip{display:inline-flex; align-items:center; gap:2px;}
.admin .st-chip .icon-btn{min-width:26px; min-height:26px; border:0 !important; background:none !important;}
.st-chip svg{width:12px; height:12px;}

/* post map */
.outline{list-style:none; display:flex; flex-direction:column; gap:3px; max-height:320px; overflow-y:auto;}
.ol-item{display:flex; gap:8px; align-items:baseline; padding:6px 10px; border-radius:8px; cursor:grab; font-size:.82rem; border:1px solid transparent;}
.ol-item:hover{background:var(--cream-soft);}
.ol-item.is-on{border-color:var(--terracotta);}
.ol-item.is-sec{background:var(--sage-soft); font-weight:700; margin-top:6px;}
.ol-item.drop{box-shadow:0 -3px 0 var(--terracotta);}
.ol-type{color:var(--terracotta); font-weight:600; white-space:nowrap;}
.ol-text{color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* posts list: numbers, filters */
.dash{display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-bottom:18px;}
.dash > div{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px;}
.dash strong{display:block; font-family:var(--serif); font-size:1.7rem; line-height:1.1; color:var(--terracotta); font-variant-numeric:tabular-nums;}
.dash span{font-size:.82rem; color:var(--ink-soft);}
.list-bar{display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:16px;}
.list-bar .search{flex:1; min-width:200px; background:var(--paper);}
.list-bar label{min-width:130px;}

/* dialogs, toast action, shortcuts */
.ask-text{color:var(--ink-soft); margin-bottom:14px; white-space:pre-line;}
.ask-input{margin-bottom:6px;}
.ask-row{justify-content:flex-start; margin-top:16px; flex-direction:row-reverse;}
.toast.has-action{pointer-events:auto;}
.admin .toast button{margin-inline-start:12px; background:none !important; border:1px solid rgba(255,255,255,.5) !important; color:var(--cream) !important; min-height:30px !important; padding:2px 12px !important;}
.keys{width:100%; border-collapse:collapse;}
.keys td{padding:8px 4px; border-bottom:1px solid var(--line);}
kbd{font-family:ui-monospace, Consolas, monospace; font-size:.85rem; background:var(--cream-soft); border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:2px 8px;}

/* template library: card footer, zoom, own templates */
.tpl-foot{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 4px 2px;}
.tpl-foot strong{font-size:.92rem; text-align:start;}
.tpl-foot span{display:inline-flex; gap:2px;}
.admin .tpl-foot .icon-btn{min-width:32px; min-height:32px; border:0 !important; background:none !important;}
.admin .tpl-foot .icon-btn.is-on{background:none !important; color:#C28A2B !important;}
.tpl-foot .icon-btn.is-on svg{fill:currentColor;}
.tpl-mine{display:flex; gap:14px; margin-top:-12px;}
.tpl-big{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper);}
.tpl-big .reveal{opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important;}
.tpl-plus svg{width:44px; height:44px;}
.admin .media-item .media-pick{padding:0 !important; border:2px solid transparent !important; border-radius:12px !important; display:block; width:100%; background:none !important;}
.admin .media-item .media-pick:hover, .admin .media-item .media-pick:focus-visible{border-color:var(--terracotta) !important;}
.media-item img{border:0;}
.admin .media-item .icon-btn{position:absolute; top:6px; left:6px; min-width:32px; min-height:32px; border-radius:50% !important;}

/* floating text-style palette (inside the Editor.js inline toolbar) */
.ts-actions{padding:8px 10px; display:flex; flex-direction:column; gap:6px; min-width:250px; direction:rtl;}
.ts-actions > div{display:flex; flex-wrap:wrap; align-items:center; gap:5px;}
.ts-actions > div > span{font-size:.72rem; color:#5B5E63; min-width:34px;}
.admin .ts-actions button:not(.sw){border:1px solid var(--line) !important; border-radius:7px !important; padding:2px 8px !important; font-size:.78rem; min-height:26px !important; background:var(--paper) !important;}
.admin .ts-actions .sw{width:22px; height:22px; border:1px solid rgba(51,54,59,.3) !important; border-radius:50% !important;}

/* editor canvas: new widths, lone-block placement, section marker button */
.ce-block:has(.w-5-6){--f:.83333;}
.ce-block:has(.w-3-5){--f:.6;}
.ce-block:has(.w-2-5){--f:.4;}
.ce-block:has(.w-1-5){--f:.2;}
.ce-block:has(.w-1-6){--f:.16666;}
.ce-block:has(.self-start){margin-inline-end:auto;}
.ce-block:has(.self-end){margin-inline-start:auto;}
.ce-block .blk.self-start, .ce-block .blk.self-end{margin-inline:0;}
.ce-block.sec-dark :is(.co-dashed, .co-outline){border-color:var(--line);}
.sec-mark svg{width:14px; height:14px; vertical-align:-.15em;}
.admin .sec-mark button{min-height:26px !important; padding:1px 10px !important; font-size:.75rem; border-radius:999px !important; color:var(--terracotta) !important;}
.ed-canvas .cmp input{pointer-events:none;}
.ed-canvas .tabs-edit .rt{min-height:1.4em;}

@media(max-width:900px){ .dash{grid-template-columns:repeat(2, 1fr);} }
@media(prefers-reduced-motion: reduce){ .admin button.is-busy::after{animation-duration:1.6s;} }

/* ================= round 3: full colour palette, emoji picker, smart templates ================= */
.admin button.color-btn{display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:5px 12px 5px 8px !important; font-variant-numeric:tabular-nums;}
.color-btn i{width:24px; height:24px; border-radius:6px; border:1px solid rgba(51,54,59,.3); background-image:linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%), linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%); background-size:8px 8px; background-position:0 0, 4px 4px; position:relative; overflow:hidden;}
.color-btn i::after{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:inherit; background-image:none;}
.admin button.emoji-btn{min-height:38px; display:inline-flex; align-items:center; gap:8px;}
.emoji-btn b{font-size:1.25rem; font-weight:400; line-height:1;}
.cpop{position:fixed; z-index:500; width:292px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px -18px rgba(0,0,0,.45); padding:12px; display:flex; flex-direction:column; gap:10px; direction:rtl; font-family:var(--sans);}
.cpop-sec > span{display:block; font-size:.72rem; font-weight:600; color:#5B5E63; margin-bottom:5px;}
.cpop-row{display:flex; flex-wrap:wrap; gap:4px;}
.cpop-grid{display:grid; grid-template-columns:repeat(9, 1fr); gap:3px; direction:ltr;}
.admin .cpop .sw, .cpop .sw{width:26px; height:26px; min-height:0 !important; border-radius:6px !important; border:1px solid rgba(51,54,59,.18) !important; padding:0 !important; cursor:pointer;}
.cpop-grid .sw{width:100%; aspect-ratio:1; height:auto;}
.cpop .sw:hover, .cpop .sw:focus-visible, .cpop .sw.is-on{outline:2.5px solid #33363B; outline-offset:1px; z-index:1; position:relative;}
.cpop-foot{display:grid; grid-template-columns:1fr 40px auto; gap:6px; align-items:center; border-top:1px solid var(--line); padding-top:10px;}
.cpop-foot input[type=text]{font:inherit; font-size:.85rem; min-height:34px; padding:4px 8px; border:1px solid var(--line); border-radius:8px; background:#fff; width:100%;}
.cpop-foot input[type=color]{width:40px; height:34px; padding:0; border:1px solid var(--line); border-radius:8px; background:none; cursor:pointer;}
.admin .cpop-foot button{min-height:34px !important; padding:2px 10px !important; font-size:.8rem;}
.emo-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(48px, 1fr)); gap:4px; max-height:56vh; overflow-y:auto; padding:2px;}
.admin button.emo{min-height:48px !important; padding:0 !important; font-size:1.5rem; line-height:1; border-radius:10px !important; border-color:transparent !important; background:none !important; font-family:'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', var(--serif), sans-serif;}
.admin button.emo:hover, .admin button.emo:focus-visible{background:var(--sage-soft) !important; border-color:var(--terracotta) !important;}
.emo-cats{margin-bottom:12px;}
.smart-form{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 18px; max-width:720px; margin-top:16px;}
.smart-form button{grid-column:1 / -1; justify-self:start;}
.admin .smart-form input[type=number]{font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 12px; min-height:40px; width:100%;}
@media(max-width:700px){ .smart-form{grid-template-columns:1fr;} }

/* fixes */
.ce-block .blk.has-bg{max-width:none; margin-inline:var(--gut);}
.media-item.is-unused img{opacity:.45;}
.media-item.is-unused:hover img{opacity:1;}

/* posts list: where each post has gone out (site, mail, WhatsApp) */
.item .pub-row{flex-basis:100%; padding-top:10px; border-top:1px dashed var(--line); align-items:center;}
.pub-row button{font-size:.86rem;}
.pub-row button:disabled{opacity:.5; cursor:not-allowed;}
.pub-done{font-size:.86rem; font-weight:600; color:var(--sage); padding:6px 4px;}
.adm-head .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}

/* ---------- Instagram carousel ---------- */
.adm-modal.ig-modal .modal-panel.is-wide{max-width:1320px;}
.ig{display:flex; flex-direction:column; gap:14px;}
.ig .row, .ig-tools, .ig-series{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.ig > *{min-width:0; max-width:100%;} /* a row that scrolls sideways must not widen the whole screen */
.ig-bar{flex-wrap:wrap; justify-content:flex-start !important; gap:8px;}
.ig-bar button, .ig-tools button{font-size:.86rem;}
.admin label.ig-inline{display:inline-flex; flex-direction:row; align-items:center; gap:8px; margin:0; width:auto;}
.admin .ig-inline select{min-height:36px; width:auto;}
.ig-stale{background:#FFF3B0; color:var(--ink); border-radius:10px; padding:8px 14px;}
.ig-strip{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; margin:0; list-style:none;}
.ig-strip li{flex:0 0 auto; cursor:grab; position:relative;}
.ig-strip li i{position:absolute; top:4px; inset-inline-start:6px; font-style:normal; font-size:.8rem;}
.admin .ig-strip button{display:block; padding:0 !important; min-height:0 !important; border:2px solid transparent; border-radius:10px; background:none; overflow:hidden; line-height:0;}
.ig-strip canvas{width:96px; height:120px; display:block;}
.admin .ig-strip li.is-over button{border-color:#B3261E; border-style:dashed;}
.admin .ig-strip li.is-on button{border-color:var(--terracotta); border-style:solid;}
.ig-edit{display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:24px; align-items:start;}
.ig-stage{display:flex; flex-direction:column; gap:10px; position:sticky; top:0;}
.ig-frame{position:relative; background:var(--cream-soft); border-radius:14px; padding:12px;}
.ig-big{width:100%; height:auto; display:block; border-radius:8px; box-shadow:var(--shadow); cursor:text;}
.ig-guides{position:absolute; inset:12px calc(12px + 3.15%); border-inline:2px dashed #B3261E; pointer-events:none;}
.ig-guides span{position:absolute; top:6px; inset-inline-start:6px; background:#B3261E; color:#fff; font-size:.7rem; padding:2px 6px; border-radius:4px;}
.ig-tools{flex-wrap:wrap; justify-content:flex-start !important; gap:8px;}
.ig-words.is-bad{color:#B3261E; font-weight:600;}
.ig-side{display:flex; flex-direction:column; gap:14px; min-width:0;}
.ig-tabs{grid-template-columns:repeat(5, 1fr);}
.admin .ig-tabs button{font-size:.84rem; padding:0 4px;}
.ig [hidden]{display:none !important;}
.ig-list{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.ig-list > div{width:100%; display:flex; flex-direction:column; gap:6px;}
.ig-item{display:flex; gap:6px; align-items:center;}
.ig-item input{flex:1; min-width:0;}
.admin .ig-color{display:inline-flex; align-items:center; gap:8px;}
.ig-color i{width:18px; height:18px; border-radius:50%; border:1px solid var(--line); display:block;}
.admin .ig-color.is-set{border-color:var(--terracotta);}
.ig-build{display:grid; grid-template-columns:auto 1fr 1fr auto; gap:10px; align-items:end;}
.ig-checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.ig-checks .is-ok{color:var(--sage);} .ig-checks .is-bad{color:#B3261E; font-weight:600;}
.ig-issues .check-list{margin-bottom:0;}
.admin .ig-prop{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:start; height:auto; padding:10px 14px; white-space:normal;}
.ig-prop span{font-weight:400; color:var(--ink-soft); font-size:.9rem;}
.ig-phone{max-width:340px; margin:0 auto 18px; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#fff; color:#111;}
.ig-ph-top{display:flex; align-items:center; gap:10px; padding:10px 14px;}
.ig-ph-top i{width:30px; height:30px; border-radius:50%; background:var(--sage-soft); border:1px solid var(--line);}
.ig-ph-reel{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;}
.ig-ph-reel canvas{flex:0 0 100%; width:100%; height:auto; scroll-snap-align:start;}
.ig-ph-cap{padding:10px 14px 14px; font-size:.86rem; line-height:1.5; margin:0;}
.ig-ph-cap span{color:#777;}
.ig-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; max-width:340px; margin:8px auto 0;}
.ig-tile{aspect-ratio:3/4; background:var(--cream-soft); overflow:hidden;}
.ig-tile canvas{width:100%; height:100%; object-fit:cover; display:block;}
.ig-h2{font-size:1.2rem; margin:34px 0 12px;}
.ig-big{touch-action:pan-y;}
/* one rhythm for every movement on this screen */
.ig{--ig-ease:cubic-bezier(.2,.7,.3,1); --ig-fast:160ms;}
.ig button, .ig .chip, .ig-strip li, .ig-design, .ig-prop{transition:transform var(--ig-fast) var(--ig-ease), box-shadow var(--ig-fast) var(--ig-ease), border-color var(--ig-fast) var(--ig-ease), background-color var(--ig-fast) var(--ig-ease);}
.ig button:active:not(:disabled){transform:scale(.97);}
.ig button, .ig-design{cursor:pointer;}
.ig button:focus-visible, .ig-design:focus-visible, .ig select:focus-visible, .ig input:focus-visible, .ig textarea:focus-visible{outline:3px solid var(--terracotta); outline-offset:2px;}
.ig .ic{display:inline-flex; width:17px; height:17px; vertical-align:-3px; margin-inline-end:4px;}
.ig .ic svg{width:100%; height:100%;}
/* the toolbar reads as groups, with the one main action first */
.ig-bar{background:var(--cream-soft); border-radius:14px; padding:10px 12px; align-items:center;}
.admin .ig-ideas-btn{background:var(--paper) !important; border-color:var(--terracotta) !important; color:var(--terracotta) !important; font-weight:600;}
/* slides in the strip lift a little under the pointer, and the chosen one stands forward */
.ig-strip{padding:8px 4px 12px; scroll-behavior:smooth;}
.ig-strip li:hover{transform:translateY(-3px);}
.ig-strip li.is-on{transform:translateY(-3px) scale(1.04);}
.admin .ig-strip button{box-shadow:0 6px 18px -10px rgba(51,54,59,.45);}
.ig-strip li i{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--paper); color:var(--terracotta); box-shadow:0 2px 6px -2px rgba(51,54,59,.4);}
/* a slide that is still being drawn shimmers instead of standing empty */
.ig canvas.is-loading, .adm-modal canvas.is-loading{background:linear-gradient(100deg, var(--cream-soft) 30%, var(--paper) 50%, var(--cream-soft) 70%) 0 0 / 300% 100%; animation:ig-shimmer 1.2s linear infinite;}
@keyframes ig-shimmer{ to{ background-position:-150% 0; } }
/* the stage: the slide sits on a soft mat */
.ig-frame{background:linear-gradient(160deg, var(--cream-soft), var(--sage-soft)); padding:18px; border-radius:18px;}
.ig-big{border-radius:10px; box-shadow:0 22px 50px -22px rgba(51,54,59,.5);}
/* the panes: section names step back, the controls step forward */
.ig-side > .stack{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px;}
.ig-side > .stack > span{font-size:.78rem; font-weight:700; letter-spacing:.06em; color:var(--ink-soft); margin-top:6px;}
.admin .ig-tones .ig-tone.is-on{border-color:var(--terracotta) !important; box-shadow:0 0 0 2px var(--terracotta); color:var(--terracotta) !important; font-weight:600;}
.admin .ig-strip li.is-on button{box-shadow:0 0 0 2px var(--terracotta), 0 12px 24px -12px rgba(51,54,59,.55);}
.ig-design[hidden]{display:none !important;}
.ig-series{justify-content:space-between !important; align-items:center; gap:14px; padding:10px 14px; border:1px solid var(--line); border-radius:14px; background:var(--paper);}
.ig-series small{color:var(--ink-soft);}
.ig-icon-group h4{font-size:.8rem; font-weight:700; letter-spacing:.06em; color:var(--ink-soft); margin:16px 0 8px;}
.ig-icon-group[hidden], .ig-icons [hidden]{display:none !important;}
.ig-icons{display:grid; grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:8px;}
.admin .ig-icons button{height:56px; padding:0; display:grid; place-items:center; color:var(--terracotta);}
.ig-icons svg{width:26px; height:26px;}
.admin .ig-icons button.is-on{border-color:var(--terracotta); box-shadow:0 0 0 2px var(--terracotta);}
.ig-groups{flex:1;}
.ig-shapes{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px;}
.ig-designs{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px;}
.admin .ig-design{display:flex; flex-direction:column; gap:10px; align-items:stretch; height:auto; padding:12px; border-radius:16px; background:var(--paper); border:1px solid var(--line); text-align:center;}
.admin .ig-design:hover{transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(51,54,59,.5);}
.admin .ig-design.is-on{border-color:var(--terracotta); box-shadow:0 0 0 2px var(--terracotta);}
.ig-design-pair{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.ig-design-pair canvas{width:100%; height:auto; border-radius:8px; display:block;}
@media(prefers-reduced-motion: reduce){ .ig *, .ig-design, .adm-modal canvas.is-loading{transition:none !important; animation:none !important;} .ig-strip{scroll-behavior:auto;} }

.ig-saved{align-self:center;}
.ig-tones{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px;}
.admin .ig-tones .ig-tone{display:flex; flex-direction:column; align-items:center; gap:6px; height:auto !important; padding:8px 4px !important; border-radius:12px !important;}
.ig-tone canvas{width:100%; height:auto; border-radius:6px; display:block;}
.ig-swatches{display:flex; gap:8px; flex-wrap:wrap;}
.admin .ig-swatches .sw{width:30px; height:30px; min-height:0; padding:0; border-radius:50%; border:1px solid var(--line);}
.admin .ig-swatches .sw.is-on{outline:2.5px solid var(--ink); outline-offset:2px;}
.admin .ig .chip.is-recent{border-style:dashed !important;}
.admin .ig-fix{font-size:.82rem; min-height:30px; padding:0 12px; margin-inline-start:6px;}
.ig-props{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px;}
.ig-props .ig-prop canvas{width:100%; height:auto; border-radius:8px; margin-bottom:6px; background:var(--cream-soft);}
.ig-props .ig-prop[hidden]{display:none;}
.ig-steps{padding-inline-start:1.3em; display:flex; flex-direction:column; gap:8px; margin:12px 0 18px;}
.ig-sent{display:grid; grid-template-columns:200px 1fr; gap:22px; align-items:start;}
.ig-qr svg{width:100%; height:auto; display:block; background:#fff; border-radius:10px;}
@media(max-width:600px){ .ig-sent{grid-template-columns:1fr;} .ig-qr{max-width:200px; margin:0 auto;} .ig-tones{grid-template-columns:repeat(3, 1fr);} }
.admin .ig-strip button:focus-visible{outline:3px solid var(--terracotta); outline-offset:2px;}
@media(max-width:860px){
  .ig-edit{grid-template-columns:1fr;}
  .ig-stage{position:static; width:100%; max-width:340px; margin-inline:auto;}
  .ig-tabs{grid-template-columns:repeat(3, 1fr);}
  .ig-build{grid-template-columns:1fr;}
}
/* phone: the screen is the whole display, the top bar scrolls sideways instead of taking four rows, and every control is finger-sized */
@media(max-width:600px){
  .adm-modal.ig-modal{padding:0;}
  .adm-modal.ig-modal .modal-panel{max-width:none; width:100%; max-height:100dvh; height:100dvh; border-radius:0;}
  .adm-modal.ig-modal .modal-header{padding:14px 16px 0 64px;}
  .adm-modal.ig-modal .modal-scroll{padding:0 14px 20px;}
  .admin .ig .ig-bar{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;}
  .ig-bar > *{flex:0 0 auto;}
  .ig-strip canvas{width:76px; height:95px;}
  .ig-stage{max-width:270px;}
  .ig .ig-bar button, .ig .ig-tools button, .ig .chip, .admin .ig .ig-tabs button, .admin .ig .ig-inline select{min-height:44px !important;}
  .ig-item .icon-btn{min-width:44px; min-height:44px;}
  /* the bar at the bottom stays one row on a phone: the two ways out, side by side; marking "posted" waits in the step that follows */
  .ig > .lib-bar{position:sticky; bottom:-20px; background:var(--paper); padding:10px 0; margin-bottom:-20px; border-top:1px solid var(--line); z-index:2;}
  .ig > .lib-bar .hint, .ig > .lib-bar [data-a=shared]{display:none;}
  .admin .ig > .lib-bar .row{flex-direction:row !important; flex-wrap:nowrap; gap:8px;}
  .admin .ig > .lib-bar .row{width:100%; min-width:0;}
  .admin .ig > .lib-bar .row button{flex:1 1 0; min-width:0 !important; min-height:46px; padding:0 4px !important; font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .ig .lib-bar{flex-direction:column; align-items:stretch;}
  .ig-side .lib-bar .row{flex-direction:column; align-items:stretch;}
  .ig-phone, .ig-grid{max-width:100%;}
}