/* 火花自动 · 配置台（tool.html）深色主题
   加载顺序：styles.css → site.css → tool.css
   思路：先用 body.tool 覆盖 styles.css 的浅色令牌，让复用组件自动变深，
        再逐块覆盖写死的浅色值与间距，保持与首页 / 用户中心同一套视觉语言。 */

html { background: #08070b; color-scheme: dark; }

body.tool {
  /* site.css 同款令牌 */
  --ink: #08070b;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .18);
  --text: #f5f5f7;
  --text-soft: #c6c6ce;
  --spark: #ff6a1a;
  --flame: #ffb545;

  /* 覆盖 styles.css 的浅色令牌 */
  --background: #08070b;
  --foreground: #f5f5f7;
  --card: #0f0e14;
  --card-foreground: #f5f5f7;
  --muted: rgba(255, 255, 255, .07);
  --muted-foreground: #8d8d99;
  --border: rgba(255, 255, 255, .10);
  --input: rgba(255, 255, 255, .14);
  --primary: #ff6a1a;
  --primary-foreground: #ffffff;
  --secondary: rgba(255, 255, 255, .07);
  --secondary-foreground: #e8e8ee;
  --destructive: #fca5a5;
  --success: #4ade80;
  --ring: rgba(255, 138, 61, .45);
  --radius: 12px;

  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(900px 440px at 84% -10%, rgba(255, 106, 26, .14), transparent 62%),
    radial-gradient(760px 420px at 0% 0%, rgba(123, 97, 255, .10), transparent 64%),
    #08070b;
  background-attachment: fixed;
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 导航 ---------- */
body.tool .site-nav-link.is-active { background: rgba(255, 255, 255, .08); opacity: 1; }

/* ---------- 页头 ---------- */
body.tool .app-shell { width: min(100% - 40px, 1160px); padding: 0 0 64px; }
body.tool .app-header { flex-wrap: wrap; align-items: flex-end; gap: 20px; padding: 34px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
body.tool .app-header .eyebrow { margin-bottom: 14px; }
body.tool .app-header h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; }
body.tool .app-header p { margin-top: 9px; color: #9c9ca8; font-size: 14.5px; }
body.tool .editor-grid { margin-top: 18px; }

/* ---------- 按钮 ---------- */
body.tool .button { min-height: 38px; padding: 8px 14px; border-radius: 10px; font-size: 14px; }
body.tool .button-outline { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #ededf2; }
body.tool .button-outline:hover { border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .09); }
body.tool .button-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #ff9a45 0%, #ff5a1f 46%, #ff2e63 100%);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(255, 90, 31, .9), inset 0 1px 0 rgba(255, 255, 255, .28);
}
body.tool .button-primary:hover { background: linear-gradient(135deg, #ffa658 0%, #ff6a2e 46%, #ff3d6d 100%); }
body.tool .button-primary:active { transform: translateY(1px); }
body.tool .icon-button, body.tool .mini-button { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); color: #d7d7de; }
body.tool .icon-button:hover, body.tool .mini-button:hover:not(:disabled) { background: rgba(255, 255, 255, .09); }
body.tool .mini-button.danger:hover:not(:disabled) { border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .12); color: #fca5a5; }
body.tool .tooltip { border: 1px solid rgba(255, 255, 255, .14); background: #14131a; color: #d7d7de; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }

/* ---------- 面板 ---------- */
body.tool .panel { padding: 18px; border-color: rgba(255, 255, 255, .09); border-radius: 16px; background: rgba(255, 255, 255, .035); box-shadow: none; }
body.tool .panel-header h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
body.tool .panel-header p { margin-top: 5px; color: #8d8d99; font-size: 12.5px; }
body.tool .side-stack { gap: 16px; }

/* ---------- 表单 ---------- */
body.tool label, body.tool legend { color: #d7d7de; font-size: 13.5px; font-weight: 500; }
body.tool legend { margin-bottom: 10px; }
body.tool input, body.tool textarea { border-color: rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(255, 255, 255, .04); color: #f5f5f7; }
body.tool input:not([type="checkbox"]):not([type="range"]) { height: 38px; }
body.tool textarea { min-height: 92px; }
body.tool input::placeholder, body.tool textarea::placeholder { color: #6f6f7b; }
body.tool input:focus-visible, body.tool textarea:focus-visible { border-color: #ff8a3d; outline: 2px solid rgba(255, 138, 61, .2); outline-offset: 0; }
body.tool .field-error { color: #fca5a5; font-size: 13px; }

/* ---------- 分段控件 / 标签页 ---------- */
body.tool .segmented, body.tool .tabs { gap: 3px; padding: 3px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 11px; background: rgba(255, 255, 255, .05); }
body.tool .segment, body.tool .tab { min-height: 30px; padding: 5px 12px; border-radius: 8px; color: #9c9ca8; font-size: 13.5px; }
body.tool .segment:hover, body.tool .tab:hover { color: #e8e8ee; }
body.tool .segment.is-active, body.tool .tab.is-active { border-color: rgba(255, 138, 61, .34); background: rgba(255, 138, 61, .14); color: #ffcf87; box-shadow: none; }

/* ---------- 导入面板 ---------- */
body.tool .import-panel { gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; background: rgba(255, 255, 255, .03); }

/* ---------- 好友 ---------- */
body.tool .friend-list { gap: 7px; }
body.tool .friend-item { padding: 4px 6px 4px 12px; border-color: rgba(255, 255, 255, .09); border-radius: 11px; background: rgba(255, 255, 255, .025); }
body.tool .friend-item:hover { border-color: rgba(255, 255, 255, .18); }
body.tool .friend-item.is-active { border-color: rgba(255, 138, 61, .5); background: rgba(255, 138, 61, .1); }
body.tool .friend-select { color: #e8e8ee; font-size: 14px; }

/* ---------- 消息 ---------- */
body.tool .message-list { gap: 7px; max-height: 420px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
body.tool .message-item { padding: 9px 10px; border-color: rgba(255, 255, 255, .09); border-radius: 11px; background: rgba(255, 255, 255, .025); }
body.tool .message-item.is-dragging { background: rgba(255, 138, 61, .1); }
body.tool .drag-handle { color: #6f6f7b; }
body.tool .message-copy strong { min-height: 20px; padding: 1px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d7d7de; font-size: 12.5px; font-weight: 500; }
body.tool .message-copy p { margin-top: 6px; color: #9c9ca8; font-size: 13.5px; }

/* ---------- 表情 ---------- */
body.tool .sticker-grid { gap: 8px; max-height: 330px; padding-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
body.tool .sticker-option { min-height: 92px; gap: 7px; border-color: rgba(255, 255, 255, .09); border-radius: 12px; background: rgba(255, 255, 255, .025); }
body.tool .sticker-option:hover { border-color: rgba(255, 138, 61, .45); background: rgba(255, 138, 61, .1); }
body.tool .sticker-option strong { color: #d7d7de; font-size: 12.5px; font-weight: 500; }

/* ---------- 空态 ---------- */
body.tool .empty-state { padding: 20px; border: 1px dashed rgba(255, 255, 255, .14); border-radius: 12px; background: none; color: #8d8d99; font-size: 13.5px; text-align: center; }

/* ---------- 高级设置 ---------- */
body.tool .range-readout { color: #d7d7de; font-size: 13px; }
body.tool .range-track { background: rgba(255, 255, 255, .12); }
body.tool .range-track span { background: linear-gradient(90deg, #ff9a45, #ff2e63); }
body.tool .range-slider input[type="range"]::-webkit-slider-thumb { border-color: #ff8a3d; background: #14131a; box-shadow: 0 0 0 4px rgba(255, 138, 61, .16); }
body.tool .range-slider input[type="range"]::-moz-range-thumb { border-color: #ff8a3d; background: #14131a; box-shadow: 0 0 0 4px rgba(255, 138, 61, .16); }
body.tool .switch-row { padding: 7px 12px; border-color: rgba(255, 255, 255, .09); border-radius: 11px; background: rgba(255, 255, 255, .02); }
body.tool .switch-row:hover { background: rgba(255, 255, 255, .05); }
body.tool .switch-row i { background: rgba(255, 255, 255, .18); }
body.tool .switch-row i::after { background: #fff; }
body.tool .switch-row input:checked + i { background: linear-gradient(135deg, #ff9a45, #ff2e63); }

/* ---------- 检查 / 校验 ---------- */
body.tool #generateHint { color: #4ade80; font-size: 12.5px; }
body.tool #generateHint.is-error { color: #fca5a5; }
body.tool .validation-item { padding: 9px 11px; border-color: rgba(255, 255, 255, .09); border-radius: 10px; background: rgba(255, 255, 255, .035); }
body.tool .validation-item strong { color: #ededf2; font-size: 12.5px; }
body.tool .validation-item span { color: #8d8d99; font-size: 12.5px; }
body.tool .validation-item.is-error { border-color: rgba(248, 113, 113, .34); background: rgba(248, 113, 113, .1); color: #fca5a5; }
body.tool .validation-item.is-error span { color: #e5a3a3; }
body.tool .validation-empty { padding: 11px; border-color: rgba(255, 255, 255, .09); border-radius: 10px; background: rgba(255, 255, 255, .03); color: #8d8d99; font-size: 12.5px; }

/* ---------- 对话框 ---------- */
body.tool .modal { border-color: rgba(255, 255, 255, .14); border-radius: 16px; background: #100f16; color: #f5f5f7; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
body.tool .modal::backdrop { background: rgba(4, 3, 8, .72); backdrop-filter: blur(3px); }
body.tool .modal-content { gap: 14px; padding: 18px; }
body.tool .modal-content h2 { font-size: 17px; }
body.tool .dialog-note { color: #9c9ca8; font-size: 13.5px; }
body.tool .dialog-note code, body.tool .cron-output { border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .06); color: #ffcf87; }
body.tool .cron-output { padding: 11px 13px; border-radius: 10px; font-size: 13px; }

/* ---------- 提示 / 拖拽 ---------- */
body.tool .panel-status.is-validation-highlighted { animation-name: tool-validation-attention; }
@keyframes tool-validation-attention {
  50% { border-color: rgba(248, 113, 113, .6); box-shadow: 0 0 0 4px rgba(248, 113, 113, .14); }
}
body.tool .toast { padding: 11px 13px; border-color: rgba(255, 255, 255, .12); border-radius: 11px; background: #16151c; color: #ededf2; font-size: 13.5px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
body.tool .toast svg { color: #4ade80; }
body.tool .toast.is-error { border-color: rgba(248, 113, 113, .4); color: #fca5a5; }
body.tool .toast.is-error svg { color: #fca5a5; }
body.tool .drop-overlay { background: rgba(4, 3, 8, .7); backdrop-filter: blur(2px); }
body.tool .drop-overlay > div { border: 2px dashed rgba(255, 138, 61, .5); border-radius: 18px; background: rgba(255, 138, 61, .08); color: #ffcf87; }

/* ---------- 响应式 ---------- */
@media (max-width: 1040px) {
  body.tool .side-stack { gap: 16px; }
}

@media (max-width: 720px) {
  body.tool .app-shell { width: min(100% - 24px, 1160px); padding: 0 0 96px; }
  body.tool .app-header { padding: 22px 0 16px; }
  body.tool .app-header h1 { font-size: 24px; }
  body.tool .app-header .eyebrow { margin-bottom: 12px; font-size: 12px; }
  body.tool .toolbar .button, body.tool .tooltip-wrap .button { padding: 4px 2px; font-size: 13px; }
  body.tool .complete-action { min-height: 54px !important; padding: 0 22px !important; color: #fff; box-shadow: 0 18px 40px -12px rgba(255, 90, 31, .9); }
  body.tool .toast-region { bottom: 82px; }
  body.tool .panel { padding: 15px; }
}