/* ============================================================
   Editor interface
   ============================================================ */
:root{
  --deep:#08252E;
  --deep-2:#0E3542;
  --panel:#0B2B34;
  --field:#07212A;
  --paper:#EEF0EC;
  --amber:#E9A62B;
  --sea:#4E9AA6;
  --bad:#F0938B;
  --line:rgba(238,240,236,.15);
  --radius:3px;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--sans);font-size:15px;color:var(--paper);background:var(--deep)}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:-.015em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border-radius:var(--radius);border:1px solid transparent;
  font-size:14px;font-weight:500;font-family:inherit;text-decoration:none;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn-amber{background:var(--amber);color:#2A1C00;border-color:var(--amber)}
.btn-amber:hover{filter:brightness(1.08)}
.btn-quiet{background:transparent;color:rgba(238,240,236,.85);border-color:var(--line)}
.btn-quiet:hover{border-color:var(--paper)}
.btn-ink{background:var(--deep-2);color:var(--paper);border-color:var(--line)}
.btn-ink:hover{border-color:var(--amber);color:var(--amber)}
.btn-danger{background:transparent;color:var(--bad);border-color:rgba(240,147,139,.4)}
.btn-danger:hover{border-color:var(--bad)}
.btn.wide{width:100%;padding:13px 16px;font-size:15px}
.btn[disabled]{opacity:.55;cursor:default}

/* ---------- sign in ---------- */
.gate-body{display:grid;place-items:center;min-height:100vh;padding:24px;background:var(--deep)}
.gate-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.gate-card h1{font-size:26px;margin-bottom:10px}
.gate-lede{font-size:14px;color:rgba(238,240,236,.62);line-height:1.55;margin:0 0 24px}
.gate-error{background:rgba(240,147,139,.12);border:1px solid rgba(240,147,139,.4);color:var(--bad);font-size:13.5px;padding:11px 13px;border-radius:var(--radius);margin:0 0 18px}
.gate-back{margin:22px 0 0;font-size:13.5px;color:rgba(238,240,236,.55)}
.gate-back a{border-bottom:1px solid var(--line);text-decoration:none}

.af{margin-bottom:16px}
.af label{display:block;font-size:12.5px;color:rgba(238,240,236,.68);margin-bottom:6px}
.af input,.af textarea,.af select{
  width:100%;background:var(--field);border:1px solid rgba(238,240,236,.18);border-radius:var(--radius);
  color:var(--paper);padding:10px 12px;font-size:14px;font-family:inherit;
}
.af textarea{min-height:78px;resize:vertical;line-height:1.5}
.af input:focus,.af textarea:focus,.af select:focus{border-color:var(--amber);outline:none}
.af input[type=color]{padding:4px;height:40px;cursor:pointer}
.af-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- shell ---------- */
.adm-top{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);
}
.adm-top-brand{display:flex;align-items:center;gap:10px;font-size:15px}
.adm-dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.adm-user{font-size:12.5px;color:rgba(238,240,236,.55)}
.adm-top-actions{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.adm-state{font-size:12.5px;color:var(--sea);padding-right:6px}
.adm-state.dirty{color:var(--amber)}

.adm-shell{display:grid;grid-template-columns:minmax(380px,460px) 1fr;height:calc(100vh - 57px)}
.adm-pane{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel);min-width:0}
.adm-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:10px 12px 0;border-bottom:1px solid var(--line)}
.adm-tab{
  background:transparent;border:0;border-bottom:2px solid transparent;
  color:rgba(238,240,236,.6);font-size:13px;font-family:inherit;padding:8px 10px;cursor:pointer;
}
.adm-tab.on{color:var(--paper);border-bottom-color:var(--amber)}
.adm-tab .pill{
  display:inline-block;margin-left:6px;background:var(--amber);color:#2A1C00;
  border-radius:100px;font-size:10.5px;font-weight:600;padding:1px 6px;
}
.adm-scroll{flex:1;overflow-y:auto;padding:20px 22px 40px}
.adm-pane-foot{
  padding:12px 22px;border-top:1px solid var(--line);background:#092630;
  display:flex;align-items:center;gap:12px;
}
.adm-saved{font-size:12.5px;color:rgba(238,240,236,.5);margin-left:auto;text-align:right}

/* ---------- preview ---------- */
.adm-preview{display:flex;flex-direction:column;background:#061B22;min-width:0}
.adm-preview-bar{
  display:flex;align-items:center;gap:14px;padding:10px 18px;
  border-bottom:1px solid var(--line);font-size:12.5px;color:rgba(238,240,236,.6);
}
.adm-sizes{display:flex;gap:2px;margin-left:auto}
.adm-size,.adm-refresh{
  background:transparent;border:1px solid var(--line);color:rgba(238,240,236,.7);
  font-family:inherit;font-size:12px;padding:5px 11px;border-radius:var(--radius);cursor:pointer;
}
.adm-size.on{border-color:var(--amber);color:var(--amber)}
.adm-frame-hold{flex:1;overflow:auto;display:flex;justify-content:center;background:#04141A;padding:0}
#preview{width:100%;max-width:100%;height:100%;border:0;background:#fff;transition:width .2s ease}

/* ---------- repeatable groups ---------- */
.grp{border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;background:rgba(255,255,255,.02)}
.grp-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.grp-head strong{font-size:13px;flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{
  background:transparent;border:1px solid rgba(238,240,236,.2);color:rgba(238,240,236,.8);
  width:28px;height:28px;border-radius:var(--radius);cursor:pointer;font-size:13px;line-height:1;flex:0 0 auto;
}
.mini:hover{border-color:var(--amber);color:var(--amber)}
.mini.danger:hover{border-color:var(--bad);color:var(--bad)}
.add{
  width:100%;background:transparent;border:1px dashed rgba(238,240,236,.3);color:rgba(238,240,236,.8);
  padding:11px;border-radius:var(--radius);cursor:pointer;font-size:13.5px;font-family:inherit;margin-bottom:22px;
}
.add:hover{border-color:var(--amber);color:var(--amber)}
.hint{font-size:12.5px;color:rgba(238,240,236,.5);line-height:1.5;margin:-4px 0 18px}
.ah{font-family:var(--serif);font-size:16px;margin:26px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.ah:first-child{margin-top:0}
.stack{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.row-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}

/* ---------- data lists (enquiries, subscribers, history) ---------- */
.item{border:1px solid var(--line);border-radius:var(--radius);padding:15px;margin-bottom:11px;background:rgba(255,255,255,.02)}
.item.unread{border-left:2px solid var(--amber)}
.item-head{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}
.item-head b{font-size:14px}
.item-when{font-size:12px;color:rgba(238,240,236,.45);margin-left:auto;white-space:nowrap}
.item-meta{font-size:12.5px;color:rgba(238,240,236,.6);line-height:1.6;word-break:break-word}
.item-meta a{color:var(--sea);text-decoration:none;border-bottom:1px solid rgba(78,154,166,.4)}
.item-msg{font-size:13.5px;color:rgba(238,240,236,.85);line-height:1.55;margin:10px 0 0;white-space:pre-wrap}
.item-foot{display:flex;gap:8px;margin-top:12px}
.item-foot button{
  background:transparent;border:1px solid var(--line);color:rgba(238,240,236,.7);
  font-family:inherit;font-size:12px;padding:5px 10px;border-radius:var(--radius);cursor:pointer;
}
.item-foot button:hover{border-color:var(--amber);color:var(--amber)}
.item-foot button.danger:hover{border-color:var(--bad);color:var(--bad)}
.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:28px 20px;text-align:center;color:rgba(238,240,236,.6);font-size:14px;line-height:1.55}
.empty b{display:block;font-family:var(--serif);font-size:17px;color:var(--paper);margin-bottom:7px;font-weight:500}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);
  background:var(--panel);color:var(--paper);border:1px solid var(--amber);border-radius:var(--radius);
  padding:12px 20px;font-size:14px;z-index:300;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;max-width:min(460px,90vw);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{border-color:var(--bad)}

@media (max-width:1000px){
  .adm-shell{grid-template-columns:1fr;height:auto}
  .adm-pane{border-right:0;border-bottom:1px solid var(--line);height:auto}
  .adm-scroll{max-height:none}
  .adm-preview{height:70vh}
  .adm-preview-bar{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important}
}