:root{
  --bg:#f4efe6;
  --paper:#fffdf8;
  --ink:#1d1a17;
  --muted:#6a6258;
  --line:#d9cfc0;
  --accent:#0f766e;
  --accent-soft:#d8f3ef;
  --warn:#9a3412;
  --shadow:0 18px 50px rgba(58,42,19,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:
  radial-gradient(circle at top left, rgba(15,118,110,.15), transparent 28%),
  radial-gradient(circle at bottom right, rgba(154,52,18,.12), transparent 24%),
  var(--bg);
  color:var(--ink);
  font-family:"Avenir Next","Segoe UI","Helvetica Neue",sans-serif;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:var(--accent)}
.shell{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
.sidebar{padding:24px 18px;border-right:1px solid var(--line);background:rgba(255,253,248,.8);backdrop-filter:blur(12px);position:sticky;top:0;height:100vh;overflow:auto}
.brand h1,.header h2{margin:0;font-family:"Iowan Old Style","Georgia",serif;font-weight:700}
.brand p{color:var(--muted);font-size:14px;line-height:1.5}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-size:11px;margin-bottom:8px}
.token-box{margin:24px 0;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.token-box label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.token-box input{width:100%}
.nav{display:grid;gap:8px}
.nav button,.quick,.ghost,.form-actions button,.stack button,.chip{
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:14px;
  padding:12px 14px;
  text-align:left;
  transition:.2s ease;
}
.nav button.active,.nav button:hover,.quick:hover,.ghost:hover,.form-actions button:hover,.stack button:hover,.chip:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
}
.main{padding:28px}
.header{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}
.ghost{width:auto;text-align:center}
.panel{display:none}
.panel.active{display:block}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:20px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.stat .label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.stat .value{font-size:34px;font-weight:800;margin-top:10px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.quick{text-align:center}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.layout-2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:18px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);font-size:14px;text-align:left;vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
tr:hover{background:rgba(15,118,110,.05)}
.table-actions{display:flex;gap:8px;flex-wrap:wrap}
.table-actions button{padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:#fff}
.stack{display:grid;gap:12px}
.stack label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:#fffdf9;color:var(--ink)}
textarea{min-height:110px;resize:vertical}
.form-actions{display:flex;gap:10px;flex-wrap:wrap}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:#fff}
.pill.ok{background:#e5fbf4;border-color:#7ad3bd;color:#0f5d52}
.pill.bad{background:#fff0ea;border-color:#e7a58a;color:#8a2f14}
.inbox-empty{color:var(--muted)}
.chat{display:grid;gap:12px;max-height:70vh;overflow:auto}
.send-box{display:grid;gap:10px;padding:14px;border:1px dashed var(--line);border-radius:18px;background:#fffaf2}
.send-box h4{margin:0}
.send-box.disabled{opacity:.65}
.send-note{font-size:13px;color:var(--muted);line-height:1.4}
.bubble{padding:12px 14px;border-radius:18px;max-width:85%;line-height:1.45;white-space:pre-wrap}
.bubble.inbound{background:#f1e7d7}
.bubble.outbound{background:var(--accent-soft);margin-left:auto}
.bubble small{display:block;margin-top:8px;color:var(--muted)}
.media-link{margin-top:8px;font-size:13px}
.debug-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.debug-card{padding:14px;border:1px solid var(--line);border-radius:18px;background:#fffaf2;display:grid;gap:8px}
.debug-card h4{margin:0}
.quick-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{padding:8px 10px;border-radius:999px;background:#fff}
.wa-frame{background:
  linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.6)),
  #ece5dd;
  border-radius:24px;
  padding:18px;
  min-height:280px;
  display:grid;
  align-content:start;
  gap:12px;
}
.wa-media{max-width:100%;border-radius:18px;border:1px solid var(--line)}
pre{margin:0;white-space:pre-wrap;word-break:break-word;background:#161311;color:#f7f0e6;border-radius:18px;padding:18px;min-height:220px}
.muted{color:var(--muted)}

@media (max-width: 1100px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
  .layout-2{grid-template-columns:1fr}
  .main{padding:18px}
}