/* ===== DevStation 主题变量 ===== */

:root {

  --bg: #0d1117;

  --bg-soft: #161b22;

  --bg-card: #1c2330;

  --bg-input: #11161f;

  --border: #2a3242;

  --border-soft: #222a37;

  --text: #e6edf3;

  --text-soft: #9aa7b6;

  --text-dim: #6b7787;

  --accent: #3b82f6;

  --accent-soft: #1d4ed833;

  --accent-2: #22d3ee;

  --success: #34d399;

  --warn: #fbbf24;

  --danger: #f87171;

  --code-font: "JetBrains Mono","Fira Code",Consolas,Menlo,Monaco,"Courier New",monospace;

  --ui-font: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;

  --radius: 10px;

  --shadow: 0 4px 20px rgba(0,0,0,.35);

  --maxw: 1280px;

}

html[data-theme="light"] {

  --bg: #f4f6fb;

  --bg-soft: #ffffff;

  --bg-card: #ffffff;

  --bg-input: #f0f3f8;

  --border: #dce3ec;

  --border-soft: #e8edf3;

  --text: #1b2430;

  --text-soft: #51607a;

  --text-dim: #8593a6;

  --accent-soft: #3b82f61a;

  --shadow: 0 4px 18px rgba(40,60,100,.10);

}



* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {

  background: var(--bg);

  color: var(--text);

  font-family: var(--ui-font);

  font-size: 14px;

  line-height: 1.6;

  min-height: 100vh;

  -webkit-font-smoothing: antialiased;

}

#matrix-bg {

  position: fixed; inset: 0; z-index: 0;

  opacity: .07; pointer-events: none;

}



/* ===== 顶栏 ===== */

.topbar {

  position: sticky; top: 0; z-index: 30;

  display: flex; align-items: center; gap: 18px;

  padding: 10px 20px;

  background: color-mix(in srgb, var(--bg-soft) 88%, transparent);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--border);

}

.brand { display: flex; align-items: baseline; gap: 8px; cursor: pointer; white-space: nowrap; }

.brand-logo { font-size: 22px; }

.brand-name { font-weight: 800; font-size: 18px; letter-spacing: .5px; color: var(--text); }

.brand-sub { font-size: 12px; color: var(--text-dim); }

.search-wrap { position: relative; flex: 1; max-width: 560px; margin: 0 auto; }

#global-search {

  width: 100%; padding: 9px 14px;

  background: var(--bg-input); border: 1px solid var(--border);

  border-radius: 999px; color: var(--text); font-size: 14px;

  outline: none; transition: border-color .15s, box-shadow .15s;

}

#global-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.search-panel {

  position: absolute; top: 46px; left: 0; right: 0; z-index: 40;

  background: var(--bg-card); border: 1px solid var(--border);

  border-radius: var(--radius); box-shadow: var(--shadow);

  max-height: 60vh; overflow-y: auto; padding: 6px;

}

.search-panel .sp-item {

  display: flex; align-items: center; gap: 10px;

  padding: 9px 12px; border-radius: 8px; cursor: pointer;

}

.search-panel .sp-item:hover, .search-panel .sp-item.active { background: var(--accent-soft); }

.search-panel .sp-icon { font-size: 16px; }

.search-panel .sp-title { flex: 1; }

.search-panel .sp-cat { font-size: 11px; color: var(--text-dim); }

.search-panel .sp-empty { padding: 14px; color: var(--text-dim); text-align: center; }



.top-actions { display: flex; gap: 8px; }

.icon-btn {

  background: var(--bg-input); border: 1px solid var(--border);

  color: var(--text-soft); padding: 8px 12px; border-radius: 8px;

  cursor: pointer; font-size: 13px; white-space: nowrap; transition: .15s;

}

.icon-btn:hover { color: var(--text); border-color: var(--accent); }



/* ===== 布局 ===== */

.layout { position: relative; z-index: 10; display: flex; gap: 0; max-width: var(--maxw); margin: 0 auto; }

.sidebar {

  width: 210px; flex: 0 0 210px; padding: 16px 10px 40px;

  border-right: 1px solid var(--border-soft); position: sticky; top: 57px;

  align-self: flex-start; height: calc(100vh - 57px); overflow-y: auto;

}

.sidebar .cat-group { margin-bottom: 6px; }

.sidebar .cat-link {

  display: flex; align-items: center; gap: 10px; width: 100%;

  padding: 9px 12px; border: none; background: none; color: var(--text-soft);

  border-radius: 8px; cursor: pointer; font-size: 13.5px; text-align: left; transition: .12s;

}

.sidebar .cat-link:hover { background: var(--bg-card); color: var(--text); }

.sidebar .cat-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.sidebar .cat-link .ci { font-size: 16px; width: 20px; text-align: center; }

.sidebar .cat-link .cnt { margin-left: auto; font-size: 11px; color: var(--text-dim); }



.content { flex: 1; min-width: 0; padding: 22px 26px 60px; }



/* ===== 首页 ===== */

.hero {

  background: linear-gradient(135deg, var(--bg-card), var(--bg-soft));

  border: 1px solid var(--border); border-radius: 14px;

  padding: 26px 28px; margin-bottom: 22px; position: relative; overflow: hidden;

}

.hero h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: .5px; }

.hero p { margin: 0; color: var(--text-soft); }

.hero .hero-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }

.hero .tag {

  font-size: 12px; padding: 4px 10px; border-radius: 999px;

  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--border);

}

.section-title { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; }

.section-title h2 { font-size: 16px; margin: 0; }

.section-title .line { flex: 1; height: 1px; background: var(--border-soft); }

.section-title .more { font-size: 12px; color: var(--text-dim); cursor: pointer; }



.home-grid { display: grid; gap: 16px; }

.home-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }

@media (max-width: 920px){ .home-cols { grid-template-columns: 1fr; } .sidebar { display:none; } }



.mini-card {

  background: var(--bg-card); border: 1px solid var(--border);

  border-radius: var(--radius); padding: 16px;

}

.mini-card h3 { margin: 0 0 10px; font-size: 14px; display:flex; align-items:center; gap:8px; }

.mini-card h3 .badge { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }

.daily-q { font-size: 13px; color: var(--text-soft); }

.daily-q .q-title { color: var(--text); font-weight: 600; margin-bottom: 6px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {

  font-size: 12px; padding: 6px 11px; border-radius: 8px;

  background: var(--bg-input); border: 1px solid var(--border);

  color: var(--text-soft); cursor: pointer; transition: .12s;

}

.chip:hover { color: var(--text); border-color: var(--accent); }



/* 今日概览（天气 + 股票） */

.today-widget { padding: 14px; }

.today-block { }

.today-block .tb-title {

  display: flex; align-items: center; justify-content: space-between;

  font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px;

}

.today-block .tb-src { font-size: 11px; color: var(--text-dim); font-weight: 400; }

.today-hr { height: 1px; background: var(--border-soft); margin: 14px 0; }

.weather-main { font-size: 32px; font-weight: 700; color: var(--text); line-height: 1; }

.weather-main small { font-size: 16px; font-weight: 500; color: var(--text-soft); margin-left: 2px; }

.weather-desc { margin-top: 8px; font-size: 14px; color: var(--text); font-weight: 500; }

.weather-meta { margin-top: 4px; font-size: 12px; color: var(--text-dim); }

.weather-city { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }

.weather-city select {

  flex: 1; background: var(--bg-input); color: var(--text); border: 1px solid var(--border);

  border-radius: 7px; padding: 6px 8px; font-size: 13px; font-family: var(--ui-font); cursor: pointer;

}

.link-btn {

  background: var(--bg-input); color: var(--text-soft); border: 1px solid var(--border);

  border-radius: 7px; padding: 6px 9px; font-size: 12px; cursor: pointer; white-space: nowrap; transition: .12s;

}

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

.stock-list { display: flex; flex-direction: column; gap: 8px; }

.stock-item { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }

.stock-item .sn { color: var(--text-soft); }

.stock-item .sv { font-family: var(--code-font); font-weight: 600; }

.stock-item .sv.up { color: #ef4444; }   /* A股：红涨绿跌 */

.stock-item .sv.down { color: #22c55e; }

.stock-item .sv.flat { color: var(--text-dim); }

.stock-item .sv.loading { color: var(--text-dim); animation: pulse 1.4s infinite; }

.stock-item .sv.err { color: var(--danger); }

@keyframes pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

.btn {

  background: var(--accent); color: #fff; border: none; padding: 8px 16px;

  border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; transition: .12s;

}

.btn:hover { filter: brightness(1.08); }

.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.ghost { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); }



/* ===== 工具卡片网格 ===== */

.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }

.tool-card {

  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);

  padding: 16px; cursor: pointer; transition: .14s; position: relative; display: flex; gap: 12px; align-items: flex-start;

}

.tool-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }

.tool-card .tc-icon { font-size: 22px; }

.tool-card .tc-body { min-width: 0; }

.tool-card .tc-title { font-weight: 600; font-size: 14px; }

.tool-card .tc-desc { font-size: 12px; color: var(--text-dim); margin-top: 3px;

  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tool-card .tc-fav {

  position: absolute; top: 10px; right: 10px; font-size: 14px; opacity: .35; cursor: pointer; transition:.12s;

}

.tool-card .tc-fav.on { opacity: 1; }



/* ===== 工具详情 ===== */

.crumbs { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }

.crumbs a { color: var(--text-dim); cursor: pointer; }

.crumbs a:hover { color: var(--accent); }

.tool-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.tool-head .th-icon { font-size: 26px; }

.tool-head h1 { font-size: 20px; margin: 0; }

.tool-head .th-desc { color: var(--text-soft); font-size: 13px; }

.panel {

  background: var(--bg-card); border: 1px solid var(--border);

  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;

}

.panel h4 { margin: 0 0 12px; font-size: 14px; color: var(--text-soft); font-weight: 600; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.row + .row { margin-top: 12px; }

.field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }

label { font-size: 12px; color: var(--text-soft); }

textarea, input[type=text], input[type=number], select {

  width: 100%; background: var(--bg-input); border: 1px solid var(--border);

  border-radius: 8px; color: var(--text); padding: 10px 12px; font-size: 13px;

  font-family: var(--code-font); outline: none; resize: vertical; transition: border-color .12s;

}

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

textarea { min-height: 130px; line-height: 1.5; }

input[type=text], input[type=number] { min-height: 38px; }

.out {

  background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px;

  padding: 12px; font-family: var(--code-font); font-size: 13px; white-space: pre-wrap;

  word-break: break-all; min-height: 60px; color: var(--text);

}

.out.ok { border-color: var(--success); }

.out.err { border-color: var(--danger); }

.hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

.kbd { font-family: var(--code-font); font-size: 11px; padding: 1px 6px; border-radius: 5px;

  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-soft); }

.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); cursor: pointer; }

.checkbox { width: 16px; height: 16px; accent-color: var(--accent); }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }

.seg button { background: var(--bg-input); border: none; color: var(--text-soft); padding: 7px 12px; cursor: pointer; font-size: 12px; }

.seg button.active { background: var(--accent); color: #fff; }



/* 表格 */

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }

.tbl th, .tbl td { border: 1px solid var(--border-soft); padding: 8px 10px; text-align: left; }

.tbl th { background: var(--bg-soft); color: var(--text-soft); font-weight: 600; }

.tbl tr:hover td { background: var(--bg-soft); }



/* 链接型工具 */

.ext-note { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }

.ext-go { display: inline-block; margin-top: 8px; }



/* 二维码 / 图片 */

.qr-box { display: grid; place-items: center; padding: 16px; background: #fff; border-radius: 8px; width: max-content; }

.qr-box img, .qr-box canvas { display: block; }

#img-preview img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }



/* Markdown 预览 */

.md-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 820px){ .md-split { grid-template-columns: 1fr; } }

.md-out { background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 14px; min-height: 200px; overflow:auto; }

.md-out h1,.md-out h2,.md-out h3 { border-bottom: 1px solid var(--border-soft); padding-bottom: 4px; }

.md-out pre { background: var(--bg); padding: 10px; border-radius: 6px; overflow:auto; }

.md-out code { font-family: var(--code-font); font-size: 12.5px; }

.md-out table { border-collapse: collapse; } .md-out th,.md-out td { border: 1px solid var(--border); padding: 4px 8px; }



/* 空状态 */

.empty { text-align: center; color: var(--text-dim); padding: 50px 0; }



/* 返回顶部 */

.back-top {

  position: fixed; right: 22px; bottom: 26px; z-index: 25;

  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);

  background: var(--bg-card); color: var(--text); font-size: 18px; cursor: pointer; box-shadow: var(--shadow);

}

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



/* 页脚 */

.site-footer {

  position: relative; z-index: 10; text-align: center; color: var(--text-dim);

  font-size: 12px; padding: 22px 10px 30px; border-top: 1px solid var(--border-soft);

  max-width: var(--maxw); margin: 0 auto;

}

.site-footer .dot { margin: 0 8px; }



/* 提示 toast */

.toast {

  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 60;

  background: var(--bg-card); color: var(--text); border: 1px solid var(--accent);

  padding: 10px 18px; border-radius: 10px; box-shadow: var(--shadow); font-size: 13px;

  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;

}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }



/* 滚动条 */

::-webkit-scrollbar { width: 9px; height: 9px; }

::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }

::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }





/* ===== 变现相关 ===== */

.promo-badge {

  font-size: 10px; padding: 1px 6px; border-radius: 5px;

  background: rgba(245,158,11,.16); color: #f59e0b;

  border: 1px solid rgba(245,158,11,.45); margin-left: 6px;

  vertical-align: middle; font-weight: 700;

}

.foot-link { color: var(--text-dim); text-decoration: none; cursor: pointer; transition: .12s; }

.foot-link:hover { color: var(--accent); }

.support-hero {

  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);

  padding: 16px; color: var(--text-soft); font-size: 13px; line-height: 1.65;

}

.support-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; margin-top: 4px; }

.ad-slot { margin-top: 4px; }

.ad-slot.ad-empty {

  font-size: 12px; color: var(--text-dim); background: var(--bg-soft);

  border: 1px dashed var(--border); border-radius: 8px; padding: 14px;

}

.ad-slot ins { min-height: 90px; display: block; }