/* 开发编码分类共享样式 - 不进 /tools/css/，自包含 */
:root {
  --code-bg: rgba(0, 0, 0, 0.04);
  --code-border: rgba(0, 0, 0, 0.08);
  --tip-bg: rgba(47, 128, 237, 0.1);
  --tip-border: rgba(47, 128, 237, 0.25);
  --wait-bg: rgba(245, 166, 35, 0.12);
  --wait-border: rgba(245, 166, 35, 0.35);
  --wait-text: #946c00;
  --ok-bg: rgba(39, 174, 96, 0.12);
  --ok-border: rgba(39, 174, 96, 0.35);
  --ok-text: #1e7e34;
  --err-bg: rgba(235, 87, 87, 0.12);
  --err-border: rgba(235, 87, 87, 0.35);
  --err-text: #c0392b;
  --preview-bg: #f8f9fa;
}

[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root {
    --code-bg: rgba(255, 255, 255, 0.06);
    --code-border: rgba(255, 255, 255, 0.1);
    --tip-bg: rgba(47, 128, 237, 0.15);
    --tip-border: rgba(47, 128, 237, 0.35);
    --wait-bg: rgba(245, 166, 35, 0.15);
    --wait-border: rgba(245, 166, 35, 0.4);
    --wait-text: #f0c040;
    --ok-bg: rgba(39, 174, 96, 0.15);
    --ok-border: rgba(39, 174, 96, 0.4);
    --ok-text: #5dd879;
    --err-bg: rgba(235, 87, 87, 0.15);
    --err-border: rgba(235, 87, 87, 0.4);
    --err-text: #ff7b7b;
    --preview-bg: #1a1d21;
  }
}

.dev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .dev-grid {
    grid-template-columns: 1fr;
  }
}

.dev-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #eee);
  border-radius: var(--radius-md, 12px);
  padding: 20px;
}

.dev-card h3 {
  font-size: 16px;
  margin: 0 0 16px;
  color: var(--text-primary, #222);
}

.dev-label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary, #666);
  margin-bottom: 6px;
}

.dev-input,
.dev-select,
.dev-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-body, #fff);
  color: var(--text-primary, #222);
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  box-sizing: border-box;
}

.dev-textarea {
  min-height: 160px;
  resize: vertical;
}

.dev-input:focus,
.dev-select:focus,
.dev-textarea:focus {
  outline: none;
  border-color: var(--primary, #ff6b00);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

.dev-output {
  min-height: 160px;
  max-height: 360px;
  overflow: auto;
  padding: 14px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-sm, 8px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary, #222);
  white-space: pre-wrap;
  word-break: break-all;
}

.dev-output.empty {
  color: var(--text-secondary, #999);
}

.dev-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.dev-btn-row .btn {
  min-width: 88px;
}

.dev-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
}

.dev-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary, #666);
  cursor: pointer;
}

.dev-options input[type="checkbox"] {
  accent-color: var(--primary, #ff6b00);
}

.status-box {
  padding: 12px 14px;
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
  margin-top: 14px;
  display: none;
}
.status-box.show { display: block; }
.status-box.wait {
  background: var(--wait-bg);
  border: 1px solid var(--wait-border);
  color: var(--wait-text);
}
.status-box.ok {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  color: var(--ok-text);
}
.status-box.err {
  background: var(--err-bg);
  border: 1px solid var(--err-border);
  color: var(--err-text);
}

.dev-tip {
  padding: 10px 12px;
  background: var(--tip-bg);
  border: 1px solid var(--tip-border);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-primary, #222);
  font-size: 13px;
  margin-bottom: 16px;
}

.dev-stat {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary, #666);
}

.dev-stat span {
  background: var(--code-bg);
  padding: 4px 8px;
  border-radius: var(--radius-sm, 6px);
}

.color-preview {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border-color, #ddd);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.color-sliders {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.color-sliders input[type="range"] {
  width: 100%;
}

.color-sliders input[type="number"] {
  width: 64px;
  padding: 6px;
  text-align: center;
}

.cron-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.cron-field label {
  font-size: 12px;
  color: var(--text-secondary, #666);
  display: block;
  margin-bottom: 4px;
}

.cron-field input {
  width: 100%;
  padding: 8px;
  font-family: monospace;
  font-size: 14px;
  text-align: center;
}

.cron-desc {
  padding: 12px;
  background: var(--code-bg);
  border-radius: var(--radius-sm, 8px);
  font-size: 14px;
  margin-top: 10px;
}

.hash-list {
  display: grid;
  gap: 10px;
}

.hash-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--code-bg);
  border-radius: var(--radius-sm, 8px);
}

.hash-item .name {
  font-size: 12px;
  color: var(--text-secondary, #666);
  font-weight: 600;
}

.hash-item .value {
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  color: var(--text-primary, #222);
}

.uuid-list {
  display: grid;
  gap: 6px;
  max-height: 300px;
  overflow: auto;
}

.uuid-list li {
  font-family: monospace;
  font-size: 13px;
  padding: 6px 8px;
  background: var(--code-bg);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-primary, #222);
}

.io-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .io-split {
    grid-template-columns: 1fr;
  }
}

.dev-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color, #eee);
  padding-bottom: 8px;
}

.dev-tab {
  padding: 6px 14px;
  border-radius: var(--radius-sm, 6px);
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary, #666);
  background: transparent;
  border: none;
}

.dev-tab.active {
  background: var(--primary, #ff6b00);
  color: #fff;
}

/* 补齐线上 common.css 未提供的面包屑分隔符/当前项样式 */
.tool-breadcrumb .sep {
  margin: 0 8px;
  color: var(--text-secondary, #999);
}
.tool-breadcrumb .cur {
  color: var(--text-primary, #222);
  font-weight: 500;
}