:root{
  --bg: #fbf7f0; --panel: #ffffff; --panel-2: #f3e9d8; --line: #e8d8bd;
  --accent: #b5762a; --accent-soft: #f0ddbb; --accent-dim: #faf3e6;
  --text: #332616; --muted: #7a624a; --muted-2: #b7a38a;
}

.pane{ border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }

/* TOOLBAR */
.toolbar{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}

.toolbar-sep{ width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }

.tool-btn{
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text);
  cursor: pointer; font-size: 13px; font-family: 'Inter', sans-serif; transition: background .15s ease, color .15s ease;
}
.tool-btn:hover{ background: var(--accent); color: #fff; border-color: var(--accent); }

select, input[type="color"]{
  padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 12.5px; cursor: pointer;
}
input[type="color"]{ padding: 3px 6px; width: 44px; height: 34px; }

/* EDITOR */
.editor{
  width: 100%; min-height: 420px; max-height: 700px; padding: 20px; outline: none; overflow: auto;
  font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.7; color: var(--text); box-sizing: border-box;
}
.editor:empty:before{ content: "Start typing here..."; color: var(--muted-2); }

/* BUTTONS */
.btns{ display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--panel-2); }
.app{ padding: 11px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13.5px; font-family: 'Inter', sans-serif; color: #fff; background: var(--accent); transition: filter .15s ease; }
.app:hover{ filter: brightness(1.1); }
.gray{ background: var(--line); color: var(--text); }

/* STATS */
.stats{ margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.stat-box{ background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-size: 12.5px; color: var(--muted); }
.stat-box b{ color: var(--accent); font-family: 'JetBrains Mono', monospace; }