:root{
  --mw-font: 'Cutive Mono', ui-monospace, monospace;
  --mw-fz: 18px;
  --mw-btn-fz: 14px;
  --mw-radius: 12px;
  --mw-gap: 12px;
}

.mw-wrap{
  font-family: var(--mw-font);
  font-size: var(--mw-fz);
  color:#000;
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 16px 28px;
}

/* Header */
.mw-head{ margin: 10px 0 14px; }
.mw-title{ font-size: var(--mw-fz); }
.mw-sub{ opacity:.65; margin-top:6px; }

/* Form row */
.mw-form{
  display:flex; align-items:center; gap: var(--mw-gap);
  margin: 14px 0 8px;
}
.mw-input{
  flex:1; min-height:44px;
  padding: 10px 12px;
  border:1px solid #000; border-radius: var(--mw-radius);
  background:#fff; font: inherit;
}
.mw-btn{
  font-size: var(--mw-btn-fz); color:#000;
  padding: 6px 14px;
  border:1px solid #000; border-radius: var(--mw-radius);
  background:#fff; font-family:var(--mw-font);
  cursor:pointer; margin-right:0;
  min-height:44px; display:inline-flex; align-items:center;
}
.mw-btn:hover{ background:#000; color:#fff; transition:.15s; }

.mw-counter{
  margin-left:auto; font-size:12px; opacity:.55; white-space:nowrap;
}

/* Preset chips */
.mw-presets{
  display:flex; flex-wrap:wrap; gap: var(--mw-gap);
  margin: 10px 0 16px;
}
.mw-chip{
  border:1px dashed #000; border-radius: var(--mw-radius);
  background:#fff; cursor:pointer;
  font-size: var(--mw-btn-fz);
  padding: 8px 14px;
  min-height:40px; display:inline-flex; align-items:center;
}
.mw-chip:hover{ background:#111; color:#fff; }

/* Divider */
.mw-divider{
  height:1px; background: repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 16px);
  opacity:.15; margin: 8px 0 14px;
}

/* Wall heading */
.mw-wall-head{ text-align:center; margin: 6px 0 10px; }
.mw-wall-title{ font-size: var(--mw-fz); }
.mw-wall-sub{ opacity:.6; margin-top:6px; }

/* Wall grid */
.mw-wall{ margin: 8px 0 18px; }
.mw-empty{ text-align:center; opacity:.6; padding:22px 0; }

.mw-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--mw-gap);
}

.mw-pill{
  border:1px dashed #000; border-radius: var(--mw-radius);
  padding: 10px 14px; background:#fff;
  font-size: var(--mw-btn-fz);
  min-height:44px; display:flex; align-items:center;
  position:relative; word-break:break-word;
}
.mw-pill.mod{ padding-right:36px; }
.mw-pill .mw-del{
  position:absolute; right:6px; top:6px;
  border:1px solid #000; background:#fff; border-radius:8px;
  width:22px; height:22px; font-size:12px; line-height:20px; cursor:pointer;
}
.mw-pill .mw-del:hover{ background:#000; color:#fff; }

.mw-footnote{ margin-top: 14px; opacity:.55; }

/* Responsive */
@media (max-width:680px){
  .mw-grid{ grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
}