:root{
  --bg:#f4f6f9; --card:#ffffff; --soft:#f7f9fb; --line:#e4e9ef;
  --ink:#1b2733; --muted:#6b7a8c; --accent:#0ea47f; --accent-d:#0c8a6a;
  --accent-soft:#e6f6f1; --danger:#e5484d; --warn:#f08c00; --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}
a{color:var(--accent);text-decoration:none}
/* topbar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:13px;padding:13px 22px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.dot{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-d));
  display:grid;place-items:center;font-weight:700;font-family:'Sora';color:#fff;font-size:16px}
.brand b{font-family:'Sora';font-size:17px;letter-spacing:-.4px;color:var(--ink)}
.brand span{display:block;font-size:11px;color:var(--muted)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.navbtn{border:1px solid var(--line);background:var(--card);color:var(--muted);padding:7px 13px;border-radius:9px;
  font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.navbtn:hover{border-color:var(--accent);color:var(--accent)}
.navbtn.solid{background:var(--accent);color:#fff;border-color:var(--accent)}
.navbtn.solid:hover{background:var(--accent-d);color:#fff}
/* layout */
.wrap{max-width:1160px;margin:0 auto;padding:24px 22px 60px}
.cols{display:grid;grid-template-columns:1fr 350px;gap:22px;align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 3px rgba(20,40,60,.04)}
.card h2{font-family:'Sora';font-size:15px;padding:16px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:9px}
.card h2 i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.body{padding:20px}
.section-label{font-family:'Sora';font-size:12px;color:var(--accent);text-transform:uppercase;
  letter-spacing:1px;margin:6px 0 14px;display:flex;align-items:center;gap:8px}
.section-label.mt{margin-top:26px}
.section-label::after{content:"";flex:1;height:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:560px){.grid,.grid.three{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;min-width:0}
.field.full{grid-column:1/-1}
label{font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:500}
label .req{color:var(--accent)}
input,select,textarea{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  color:var(--ink);font-family:inherit;font-size:14px;transition:.15s;width:100%}
input.mono{font-family:'IBM Plex Mono'}
textarea{resize:vertical;min-height:60px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:#aab6c2}
select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7a8c' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
/* multiselect chips */
.multi{display:flex;flex-wrap:wrap;gap:8px;padding:9px;border:1px solid var(--line);border-radius:10px;background:#fff}
.chip{font-size:13px;padding:7px 13px;border-radius:30px;border:1px solid var(--line);background:var(--soft);
  color:var(--muted);cursor:pointer;transition:.12s;user-select:none}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
/* foto */
.drop{position:relative;border:1.5px dashed var(--line);border-radius:12px;background:var(--soft);
  aspect-ratio:4/3;display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:.15s}
.drop:hover{border-color:var(--accent);background:var(--accent-soft)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .ph{text-align:center;color:var(--muted);font-size:12px;padding:10px}
.drop .ph svg{display:block;margin:0 auto 6px}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop .badge{position:absolute;top:6px;right:6px;background:var(--accent);color:#fff;font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:20px;display:none}
.drop.has .badge{display:block}.drop.has .ph{display:none}
.drop .clear{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;border:none;
  width:24px;height:24px;border-radius:50%;cursor:pointer;display:none;font-size:14px;line-height:1}
.drop.has .clear{display:block}
/* toggle */
.toggle{display:flex;align-items:center;gap:11px;padding:14px;background:var(--soft);border:1px solid var(--line);
  border-radius:10px;margin-top:20px}
.switch{position:relative;width:42px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#cdd6df;border-radius:30px;transition:.2s;cursor:pointer}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;
  transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+.slider{background:var(--accent)}
.switch input:checked+.slider::before{transform:translateX(18px)}
.toggle div b{font-size:13px}.toggle div span{font-size:11px;color:var(--muted)}
/* buttons */
.actions{display:flex;gap:12px;margin-top:22px}
.btn{flex:1;border:none;border-radius:11px;padding:13px;font-family:'Sora';font-weight:600;font-size:14px;cursor:pointer;transition:.15s}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(14,164,127,.28)}
.btn-ghost{flex:none;background:#fff;border:1px solid var(--line);color:var(--muted);padding:13px 18px}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
/* preview */
.preview{position:sticky;top:78px;display:flex;flex-direction:column;gap:18px}
.wa{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.wa-head{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#075e54}
.wa-head .g{width:34px;height:34px;border-radius:50%;background:#0b8074;display:grid;place-items:center;font-size:15px}
.wa-head b{font-size:13px;color:#fff}.wa-head span{display:block;font-size:11px;color:#9fd3cb}
.wa-body{padding:18px 16px;background:#ece5dd;min-height:150px}
.bubble{background:#dcf8c6;border-radius:10px 0 10px 10px;padding:11px 13px;font-family:'IBM Plex Mono';font-size:11px;
  line-height:1.55;white-space:pre-wrap;color:#1f2c1a;word-break:break-word;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bubble .t{display:block;text-align:right;font-size:9px;color:#5a7a4e;margin-top:6px}
.hint{font-size:11.5px;color:var(--muted);padding:0 4px}
/* history */
.hist .body{padding:8px;max-height:330px;overflow:auto}
.hist-item{padding:12px 14px;border-radius:10px;border:1px solid transparent;font-size:12px}
.hist-item:hover{background:var(--soft);border-color:var(--line)}
.hist-item .row1{display:flex;justify-content:space-between;gap:8px}
.hist-item .row1 b{font-family:'IBM Plex Mono';color:var(--accent);font-size:11px}
.hist-item .row1 i{font-style:normal;font-size:10px;color:var(--muted)}
.hist-item .nm{font-weight:600;margin-top:3px}
.hist-item .meta{color:var(--muted);margin-top:2px}
/* settings */
.set-item{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px;background:var(--soft)}
.set-item .head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.set-item .head b{font-family:'Sora';font-size:14px}
.set-item .head code{font-family:'IBM Plex Mono';font-size:11px;color:var(--muted);background:#fff;padding:2px 7px;border-radius:6px;border:1px solid var(--line)}
.typewrap{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.set-item textarea{min-height:90px;font-family:'IBM Plex Mono';font-size:13px}
/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(160%);background:#fff;
  border:1px solid var(--line);border-left:4px solid var(--accent);padding:14px 18px;border-radius:12px;
  min-width:300px;max-width:90vw;z-index:50;box-shadow:0 18px 45px rgba(20,40,60,.18);transition:transform .3s}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.err{border-left-color:var(--danger)}
#toast b{font-family:'Sora';font-size:13px;display:block;margin-bottom:3px}
#toast small{color:var(--muted);font-size:11.5px;font-family:'IBM Plex Mono'}
.spin{display:inline-block;width:14px;height:14px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;
  animation:s .6s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes s{to{transform:rotate(360deg)}}