/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: "DejaVuSans";
  src: url("/fonts/DejaVuSans.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DejaVuSans";
  src: url("/fonts/DejaVuSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: #f7f7f8; color: #111; }
.container { max-width: 1100px; margin: 0 auto; padding: 18px; }
.card { background: #fff; border: 1px solid #e7e7ea; border-radius: 12px; padding: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1; min-width: 240px; }
h1 { margin: 0 0 12px; font-size: 20px; }
h2 { margin: 0 0 10px; font-size: 16px; }
.small { color: #555; font-size: 12px; }
.tabs { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.tab { border: 1px solid #e7e7ea; background: #fff; color: #111; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.tab.active { background: #111; color: #fff; border-color: #111; }
input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid #d9d9df; border-radius: 10px; background: #fff; }
textarea { min-height: 100px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; }
button { border: 0; background: #111; color: #fff; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
button.secondary { background: #fff; color: #111; border: 1px solid #d9d9df; }
button:disabled { opacity: .6; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; border-top: 1px solid #f0f0f2; padding: 8px 6px; vertical-align: top; }
code { background: #f2f2f5; padding: 2px 6px; border-radius: 8px; }
hr { border: 0; border-top: 1px solid #eee; margin: 12px 0; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; font-size: 12px; border: 1px solid #e7e7ea; background: #fff; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: #999; }
.dot.ok { background: #1db954; }
.dot.bad { background: #ff3b30; }
.kv { display:flex; gap:8px; align-items:center; }
.kv input { flex: 1 1; }
.kv button { flex: 0 0 auto; }

/* preview helpers */
.draggable { cursor: -webkit-grab; cursor: grab; }
.draggable:active { cursor: -webkit-grabbing; cursor: grabbing; }