/* 前台工具箱：方案 §7.5 —— 与 theme-joe-next 同环境，复用主题 tokens。
   不分层样式（主题约定：不分层优先于 @layer），不硬编码任何主题色值。 */

.tbx-root {
  --tbx-ink: var(--text-primary, currentColor);
  --tbx-regular: var(--text-regular, currentColor);
  --tbx-muted: var(--text-secondary, currentColor);
  --tbx-placeholder: var(--text-placeholder, currentColor);
  --tbx-surface: var(--card-fill, color-mix(in srgb, currentColor 3%, transparent));
  --tbx-raised: var(--bg-raised, color-mix(in srgb, currentColor 2%, transparent));
  --tbx-hover: var(--bg-hover, color-mix(in srgb, currentColor 6%, transparent));
  --tbx-border: var(--border-base, color-mix(in srgb, currentColor 16%, transparent));
  --tbx-border-soft: var(--border-faint, color-mix(in srgb, currentColor 10%, transparent));
  --tbx-accent: var(--theme-solid, currentColor);
  --tbx-radius: 12px;
  --tbx-radius-sm: 8px;
  color: var(--tbx-regular);
  max-width: 100%;
  padding: 4px 0 32px;
  box-sizing: border-box;
}

/* ---------- 与主题一致的双栏版式 ----------
   Halo 的「插件页布局」是单列通栏：.page-plugin > .joe_main > .joe_detail。
   这里把 .joe_detail 摊平成透明容器，让内容卡片与主题侧栏并列，
   与主题自带的文章页 / 单页保持相同的「左主栏 + 右侧栏」结构。
   主题在 <=992px 会隐藏 .joe_aside，此时内容自动铺满主栏。 */
.joe_main_container.page-plugin > .joe_main {
  display: flex;
  align-items: flex-start;
}

.joe_main_container.page-plugin > .joe_main > .joe_detail.joe_plugin_page {
  display: contents;
}

.joe_main_container.page-plugin > .joe_main > .joe_detail > .tbx-root {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 15px;
  padding: 20px;
  background: var(--bg-page, var(--tbx-surface));
  border-radius: var(--radius-wrap, var(--tbx-radius));
  box-shadow: var(--shadow, none);
}

/* 主题将侧栏设为左侧时（aside.position = left），对齐主题的 .revert 行为。 */
.joe_main_container.page-plugin > .joe_main:has(.joe_aside.pos_left) {
  flex-direction: row-reverse;
}
.joe_main_container.page-plugin .joe_aside.pos_left {
  margin-left: 0;
  margin-right: 15px;
}

@media (max-width: 500px) {
  .joe_main_container.page-plugin > .joe_main > .joe_detail > .tbx-root {
    border-radius: 0;
    padding: 12px;
  }
}

.tbx-root *,
.tbx-root *::before,
.tbx-root *::after { box-sizing: border-box; }

/* 作者样式会覆盖 UA 的 [hidden]，这里显式补回，供导航筛选使用。 */
.tbx-root [hidden] { display: none !important; }

.tbx-head { margin: 0 0 22px; }

.tbx-title {
  margin: 0 0 8px;
  font-size: 1.6rem;
  line-height: 1.35;
  color: var(--tbx-ink);
  font-weight: 600;
}

.tbx-lead {
  margin: 0;
  color: var(--tbx-muted);
  font-size: .92rem;
  line-height: 1.7;
}

/* ---------- 卡片墙 ---------- */
.tbx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.tbx-grid.is-hidden { display: none; }

.tbx-card {
  border: 1px solid var(--tbx-border);
  border-radius: var(--tbx-radius);
  background: var(--tbx-surface);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tbx-card:hover {
  transform: translateY(-3px);
  border-color: var(--tbx-accent);
  box-shadow: var(--shadow-hover, 0 8px 24px color-mix(in srgb, currentColor 12%, transparent));
}

.tbx-card__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: inherit;
  text-decoration: none;
}

.tbx-card__icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--tbx-radius-sm);
  border: 1px solid var(--tbx-border-soft);
  color: var(--tbx-accent);
  background: var(--tbx-raised);
}

.tbx-card__icon svg { width: 22px; height: 22px; }

.tbx-card__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }

.tbx-card__name { color: var(--tbx-ink); font-size: 1rem; font-weight: 600; }

.tbx-card__desc {
  color: var(--tbx-muted);
  font-size: .84rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tbx-card__arrow { color: var(--tbx-muted); flex: 0 0 auto; }

/* ---------- 工具面板 ---------- */
.tbx-panel { display: none; }
.tbx-panel.is-active { display: block; }

.tbx-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--tbx-border);
  border-radius: var(--tbx-radius) var(--tbx-radius) 0 0;
  background: var(--tbx-raised);
}

.tbx-panel__head h2 { margin: 0; font-size: 1.05rem; color: var(--tbx-ink); font-weight: 600; }

.tbx-back {
  color: var(--tbx-muted);
  font-size: .86rem;
  text-decoration: none;
  white-space: nowrap;
}

.tbx-back:hover { color: var(--tbx-accent); }

.tbx-tool {
  border: 1px solid var(--tbx-border);
  border-top: 0;
  border-radius: 0 0 var(--tbx-radius) var(--tbx-radius);
  background: var(--tbx-surface);
  padding: 20px 18px;
}

/* ---------- 通用控件 ---------- */
.tbx-row,
.tbx-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }

.tbx-toolbar { align-items: center; margin-bottom: 14px; }
.tbx-toolbar__spacer { flex: 1; }

/* 工具栏：缩进标签改为行内前缀，让「美化 / 压缩 / 缩进下拉框」在同一水平线上。
   .tbx-field 默认是「标签在上、控件在下」的纵向堆叠，会把下拉框压低一截。 */
.tbx-toolbar .tbx-field--sm {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.tbx-toolbar .tbx-field--sm > span { white-space: nowrap; }
.tbx-toolbar .tbx-field--sm select {
  width: auto;
  min-width: 104px;
  height: 38px;
  padding: 0 12px;
}
.tbx-toolbar > .tbx-btn {
  height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tbx-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; }
.tbx-field--sm { flex: 0 1 150px; }
.tbx-field > span { font-size: .82rem; color: var(--tbx-muted); }

.tbx-root input[type="text"],
.tbx-root input[type="search"],
.tbx-root input[type="datetime-local"],
.tbx-root select,
.tbx-root textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--tbx-border);
  border-radius: var(--tbx-radius-sm);
  background: var(--tbx-raised);
  color: var(--tbx-ink);
  font: inherit;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s ease;
}

.tbx-root input:focus,
.tbx-root select:focus,
.tbx-root textarea:focus { border-color: var(--tbx-accent); }

.tbx-root input::placeholder,
.tbx-root textarea::placeholder { color: var(--tbx-placeholder); opacity: .8; }

.tbx-btn {
  padding: 9px 15px;
  border: 1px solid var(--tbx-accent);
  border-radius: var(--tbx-radius-sm);
  background: var(--tbx-accent);
  color: var(--bg-page, var(--tbx-surface));
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .2s ease, transform .2s ease;
}

.tbx-btn:hover { opacity: .86; }
.tbx-btn:active { transform: translateY(1px); }

.tbx-btn--ghost {
  background: transparent;
  color: var(--tbx-regular);
  border-color: var(--tbx-border);
}

.tbx-btn--ghost:hover { border-color: var(--tbx-accent); color: var(--tbx-accent); }

.tbx-sep { border: 0; border-top: 1px solid var(--tbx-border-soft); margin: 20px 0; }

.tbx-note { margin: 14px 0 0; font-size: .8rem; color: var(--tbx-muted); line-height: 1.6; }

.tbx-status { margin: 10px 0 0; min-height: 1.2em; font-size: .84rem; color: var(--tbx-muted); }
.tbx-status.is-error { color: var(--tbx-accent); }

.tbx-empty {
  padding: 28px 20px;
  text-align: center;
  border: 1px dashed var(--tbx-border);
  border-radius: var(--tbx-radius-sm);
  color: var(--tbx-muted);
}

.tbx-empty h3 { margin: 0 0 10px; color: var(--tbx-ink); font-size: 1rem; }
.tbx-empty p { margin: 0 auto; max-width: 560px; font-size: .88rem; line-height: 1.75; }
.tbx-empty-inline { padding: 18px; text-align: center; color: var(--tbx-muted); font-size: .88rem; }

/* ---------- 时间戳结果 ---------- */
.tbx-results { margin-top: 14px; display: grid; gap: 8px; }
.tbx-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--tbx-border-soft);
  border-radius: var(--tbx-radius-sm);
  background: var(--tbx-raised);
  font-size: .88rem;
}
.tbx-result__label { color: var(--tbx-muted); flex: 0 0 auto; }
.tbx-result__value { color: var(--tbx-ink); font-variant-numeric: tabular-nums; text-align: right; word-break: break-all; }

/* ---------- JS 编辑器 ---------- */
.tbx-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tbx-editor .tbx-field { flex: initial; }
.tbx-editor textarea {
  min-height: 280px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .84rem;
  line-height: 1.6;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* ---------- 网址导航 ---------- */
.tbx-navbar { margin-bottom: 12px; }
/* 独立导航页 /mydaohang：搜索框加宽占半行 */
.tbx-navpage .tbx-navbar input[type="search"] { width: min(100%, 420px); }
.tbx-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tbx-tabs button {
  padding: 6px 13px;
  border: 1px solid var(--tbx-border);
  border-radius: 999px;
  background: transparent;
  color: var(--tbx-muted);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}
.tbx-tabs button:hover { border-color: var(--tbx-accent); color: var(--tbx-accent); }
.tbx-tabs button.is-active { border-color: var(--tbx-accent); color: var(--tbx-accent); background: var(--tbx-hover); }
.tbx-tab__count { opacity: .75; margin-left: 3px; }

.tbx-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tbx-site {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--tbx-border);
  border-radius: var(--tbx-radius-sm);
  background: var(--tbx-raised);
  color: inherit;
  text-decoration: none;
  min-width: 0;
  transition: transform .2s ease, border-color .2s ease;
}
.tbx-site:hover { transform: translateY(-2px); border-color: var(--tbx-accent); }
.tbx-site__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tbx-border-soft);
  border-radius: var(--tbx-radius-sm);
  color: var(--tbx-accent);
  font-size: .9rem;
  overflow: hidden;
}
.tbx-site__icon img { width: 18px; height: 18px; object-fit: contain; }
.tbx-site__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tbx-site__body strong { color: var(--tbx-ink); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-site__body small { color: var(--tbx-muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-site__go { color: var(--tbx-muted); flex: 0 0 auto; }

/* ---------- 响应式：主题断点 500 / 768 / 992 ---------- */
@media (max-width: 992px) {
  .tbx-editor { grid-template-columns: 1fr; }
  .tbx-editor textarea { min-height: 220px; }
}

@media (max-width: 768px) {
  .tbx-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .tbx-tool { padding: 16px 12px; }
  .tbx-panel__head { padding: 12px; }
  .tbx-field--sm { flex: 1 1 120px; }
}

@media (max-width: 500px) {
  .tbx-grid { grid-template-columns: 1fr; }
  .tbx-sites { grid-template-columns: 1fr; }
  .tbx-title { font-size: 1.35rem; }
  .tbx-btn { padding: 8px 12px; }
  .tbx-toolbar__spacer { display: none; }
  .tbx-result { flex-direction: column; gap: 3px; }
  .tbx-result__value { text-align: left; }
}