/* Toolszu Developer Tools — shared editor styles (works together with Tailwind classes in the page) */
.tzdev-ta { width: 100%; min-height: 340px; resize: vertical; padding: 14px 16px; border: 1px solid #cbd5e1; border-radius: 14px;
  background: #f8fafc; color: #0f172a; font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  tab-size: 2; white-space: pre; overflow: auto; transition: border-color .15s, box-shadow .15s, background .15s; }
.tzdev-ta.wrap { white-space: pre-wrap; word-break: break-word; }
.tzdev-ta:focus { outline: none; background: #fff; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .15); }
.tzdev-ta[readonly] { background: #f1f5f9; }
.tzdev-ta.tzdev-over { border: 2px dashed #3b82f6; background: #eff6ff; }
.tzdev-frame { width: 100%; min-height: 340px; height: 340px; border: 1px solid #cbd5e1; border-radius: 14px; background: #fff; resize: vertical; }
.tzdev-btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; padding: .4rem .7rem;
  border-radius: .5rem; border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; transition: all .15s; white-space: nowrap; }
.tzdev-btn:hover { border-color: #93c5fd; color: #1d4ed8; background: #eff6ff; }
.tzdev-btn.is-on { background: #2563eb; border-color: #2563eb; color: #fff; }
.tzdev-options { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 14px; padding: .85rem 1rem; }
.tzdev-options label { font-size: .85rem; font-weight: 600; color: #334155; display: inline-flex; align-items: center; gap: .45rem; }
.tzdev-options select, .tzdev-options input[type="text"], .tzdev-options input[type="number"] { border: 1px solid #cbd5e1; border-radius: .6rem;
  padding: .4rem .6rem; background: #fff; font-weight: 600; font-size: .85rem; color: #0f172a; }
.tzdev-options input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: #2563eb; }
@media (max-width: 640px) { .tzdev-ta, .tzdev-frame { min-height: 240px; height: auto; } .tzdev-frame { height: 300px; } }
/* HTML editor */
.he-pane { display: flex; flex-direction: column; min-width: 0; }
.he-ta { min-height: 460px; height: 460px; }
.he-frame { width: 100%; height: 460px; border: 1px solid #cbd5e1; border-radius: 14px; background: #fff; margin: 0 auto; display: block; transition: width .2s; }
.he-console { height: 120px; overflow: auto; background: #0f172a; border-radius: 12px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.he-full { position: fixed; inset: 0; z-index: 60; background: #fff; padding: 16px; overflow: auto; }
.he-full .he-ta, .he-full .he-frame { height: calc(100vh - 260px); min-height: 300px; }
@media (max-width: 640px) { .he-ta, .he-frame { min-height: 300px; height: 300px; } }
/* Schema generator + spreadsheet tools */
.tz-drop { border: 2px dashed #cbd5e1; border-radius: 16px; background: #f8fafc; transition: all .15s; cursor: pointer; }
.tz-drop:hover, .tz-drop.is-over { border-color: #3b82f6; background: #eff6ff; }
.tz-prev { max-height: 340px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 14px; }
.tz-prev table { border-collapse: collapse; font-size: 12.5px; width: max-content; min-width: 100%; }
.tz-prev th, .tz-prev td { border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; padding: 6px 10px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.tz-prev thead th { position: sticky; top: 0; background: #eff6ff; color: #1e3a8a; font-weight: 700; }
.tz-prev tbody th { background: #f8fafc; color: #94a3b8; font-weight: 600; }