/* =========================================================
   轻量工具箱 — 主题系统
   默认深色主题写在 :root；浅色主题通过 [data-theme="light"] 覆盖
   所有组件颜色均引用变量，禁止硬编码

   基础三原色：#8C3232（砖红主色） · #363636（深灰黑底） · #CAD2C5（青苔绿点缀）
   设计风格：手作工坊风 · 暖调 · 克制但有记忆点
   ========================================================= */

@font-face{
  font-family:"HarmonyOS Sans SC";
  src:url("../font/HarmonyOS_Sans_SC_Medium.subset.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

:root, [data-theme="dark"]{
  /* ---- 左侧更深，右侧更浅，拉开层级 ---- */
  --bg:#3F3F3F;                    /* 右侧主区域，比之前亮 */
  --sidebar:#222222;               /* 左侧菜单，更深 */
  --card:#4A4A4A;                  /* 卡片再亮一点 */
  --elev:#444444;
  --border:#555555;
  --border-2:#606060;
  /* ---- 主色：#8C3232 砖红（RGB 140,50,50） ---- */
  --accent:#8C3232;
  /* ---- 次主色：#CAD2C5 青苔绿（RGB 202,210,197），给品牌渐变头 ---- */
  --accent-2:#CAD2C5;
  /* ---- 文字：暖调米白灰（不是冷白，衬砖红更和谐） ---- */
  --text:#E8E6E2;                  /* 暖米白正文 */
  --text-2:#B5B2AD;                /* 次级 */
  --text-3:#777470;                /* 最弱层 */
  /* ---- 结果色：青苔绿，和砖红主色撞一下 ---- */
  --out:#CAD2C5;
  /* ---- danger 是比 accent 更深的红，区分于主色 ---- */
  --danger:#A02828;
  --topbar:rgba(54,54,54,.72);
  /* ---- 派生表面 ---- */
  --surface-1:#424242;             /* icon-btn hover / sidebar hover */
  --surface-2:#2E2E2E;             /* 输入框 / pre / stat bg */
  --surface-3:#3B3B3B;             /* select dropdown */
  --surface-4:#454545;             /* card hover bg */
  --brand-fill:#3E3E3E;
  --text-on-accent:#F5F3F0;
  /* ---- accent alpha 全部从砖红 RGB(140,50,50) 派生 ---- */
  --accent-a:rgba(140,50,50,.14);   /* badge / cat.active */
  --accent-b:rgba(140,50,50,.38);   /* ghost hover border */
  --accent-c:rgba(140,50,50,.40);   /* card hover border */
  --accent-d:rgba(140,50,50,.48);   /* focus border */
  --accent-e:rgba(140,50,50,.10);   /* focus shadow ring */
  --accent-f:rgba(140,50,50,.12);   /* inline code bg */
  --accent-g:rgba(140,50,50,.06);   /* blockquote bg */
  /* ---- 阴影：偏暖，不用纯黑 ---- */
  --shadow-card:0 8px 20px rgba(20,20,20,.45);
  --shadow-card-hover:0 14px 32px rgba(20,20,20,.58), 0 0 0 1px var(--accent-e);
  --shadow-qr:0 16px 32px rgba(20,20,20,.55);
  --shadow-toast:0 12px 32px rgba(20,20,20,.6);
  --overlay:rgba(255,255,255,.04);
  /* ---- 装饰背景 ---- */
  --dot-bg:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  --glow-1:rgba(140,50,50,.18);     /* 砖红光晕 */
  --glow-2:rgba(202,210,197,.08);   /* 青苔绿光晕 */
  /* ---- select 箭头（深色下更亮） ---- */
  --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B0ADAA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  --chevron-hover:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C3232' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  /* ---- diff ---- */
  --diff-add:#A8C49A;
  --diff-del:#D87878;
  --diff-add-bg:rgba(168,196,154,.12);
  --diff-del-bg:rgba(216,120,120,.12);
  /* ---- scrollbar ---- */
  --scrollbar-thumb:rgba(200,200,200,.22);
  --scrollbar-thumb-hover:rgba(200,200,200,.40);
  /* ---- 圆角 ---- */
  --r-card:8px;
  --r-btn:6px;
  --sans:"HarmonyOS Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:"HarmonyOS Sans SC","JetBrains Mono","SFMono-Regular",Consolas,monospace;
}

/* =========================================================
   高级浅色主题 — 手作工坊风 · 暖米白底 + 砖红主色 + 青苔绿点缀
   以三原色在浅底上重构：
   #363636 → 深灰黑 → 文字 / 卡片边框最深层
   #8C3232 → 砖红保持（浅底上依然醒目，主色唯一）
   #CAD2C5 → 青苔绿 → 降深为 #5A6B52 才能当"结果色"在浅底上可读
   背景不用冷白，用暖米白 #F5F3F0 衬砖红不违和
   ========================================================= */
[data-theme="light"]{
  /* ---- 左侧更深（暖米灰），右侧更浅（近白） ---- */
  --bg:#FAFAF7;                    /* 右侧主区域，更浅近白 */
  --sidebar:#ECEAE5;               /* 左侧菜单，暖米灰更深 */
  --card:#FFFFFF;
  --elev:#FFFFFF;
  --border:#DED8CE;
  --border-2:#D0C9BB;
  /* ---- 主色保持砖红 ---- */
  --accent:#8C3232;
  /* ---- 次主色：青苔绿加深版（原 #CAD2C5 在浅底太浅） ---- */
  --accent-2:#5A6B52;
  /* ---- 文字：暖调深灰，不用冷黑 ---- */
  --text:#2B2B2B;                  /* 近黑但带暖调 */
  --text-2:#5A5A5A;
  --text-3:#9A9A9A;
  /* ---- 结果色：深青苔绿，和砖红撞脸，好看 ---- */
  --out:#5A6B52;
  --danger:#9E2A2A;
  --topbar:rgba(255,255,255,.78);
  /* ---- 派生表面：暖调米白分层 ---- */
  --surface-1:#EFECE7;             /* icon-btn hover / pill / sidebar hover */
  --surface-2:#ECE9E4;             /* 输入框 / stat bg / pre 背景 */
  --surface-3:#ECE9E4;             /* select dropdown */
  --surface-4:#F8F6F3;             /* card hover 极微上浮 */
  --brand-fill:#FFFFFF;
  --text-on-accent:#F5F3F0;
  /* ---- accent alpha 全部从砖红 RGB(140,50,50) 派生 ---- */
  --accent-a:rgba(140,50,50,.08);
  --accent-b:rgba(140,50,50,.28);
  --accent-c:rgba(140,50,50,.38);
  --accent-d:rgba(140,50,50,.42);
  --accent-e:rgba(140,50,50,.07);
  --accent-f:rgba(140,50,50,.07);
  --accent-g:rgba(140,50,50,.04);
  /* ---- 多层柔光阴影，偏暖 ---- */
  --shadow-card:
    0 1px 2px rgba(43,43,43,.04),
    0 1px 3px rgba(43,43,43,.05);
  --shadow-card-hover:
    0 4px 14px rgba(43,43,43,.05),
    0 10px 28px rgba(43,43,43,.07),
    0 0 0 1px var(--accent-e);
  --shadow-qr:
    0 2px 10px rgba(43,43,43,.06),
    0 8px 24px rgba(43,43,43,.09);
  --shadow-toast:
    0 4px 14px rgba(43,43,43,.07),
    0 14px 36px rgba(43,43,43,.11);
  --overlay:rgba(43,43,43,.035);
  /* ---- 装饰背景 ---- */
  --dot-bg:radial-gradient(rgba(43,43,43,.04) 1px, transparent 1px);
  --glow-1:rgba(140,50,50,.06);
  --glow-2:rgba(90,107,82,.04);
  /* ---- select 箭头（浅色下更深） ---- */
  --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7670' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  --chevron-hover:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C3232' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  /* ---- diff ---- */
  --diff-add:#5A7A52;
  --diff-del:#9E2A2A;
  --diff-add-bg:rgba(90,122,82,.08);
  --diff-del-bg:rgba(158,42,42,.08);
  /* ---- scrollbar ---- */
  --scrollbar-thumb:rgba(120,120,120,.32);
  --scrollbar-thumb-hover:rgba(120,120,120,.55);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  transition:background .24s ease, color .24s ease;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:var(--dot-bg);
  background-size:24px 24px;
  background-position:0 0;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 22% -12%, var(--glow-1), transparent 70%),
    radial-gradient(760px 520px at 88% -6%, var(--glow-2), transparent 70%);
}

/* ---------- scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);}

button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
textarea,input,select{font:inherit;color:inherit;}
a{color:var(--accent);text-decoration:none;}

/* ---------- shell ---------- */
.app{position:relative;z-index:1;height:100vh;display:flex;flex-direction:column;}

.topbar{
  height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 24px;
  background:var(--topbar);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-2);
  transition:background .24s ease, border-color .24s ease;
}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand-mark{width:32px;height:32px;display:grid;place-items:center;flex:none;}
.brand-mark svg{display:block;}
.brand-name{font-size:18px;font-weight:700;letter-spacing:.2px;color:var(--text);white-space:nowrap;}

.crumb{display:flex;align-items:center;gap:8px;font-size:14px;}
.crumb .c-cat{color:var(--text-2);}
.crumb .c-sep{color:var(--text-3);}
.crumb .c-cur{color:var(--text);font-weight:500;}

.search{
  width:360px;height:40px;flex:none;
  display:flex;align-items:center;gap:10px;
  padding:0 12px;border-radius:6px;
  background:var(--elev);border:1px solid transparent;
  transition:border-color .18s ease, box-shadow .18s ease, background .24s ease;
}
.search:focus-within{border-color:var(--accent-d);box-shadow:0 0 0 3px var(--accent-e);}
.search svg{flex:none;color:var(--text-3);}
.search input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-size:13px;color:var(--text);
}
.search input::placeholder{color:var(--text-3);}

.top-actions{display:flex;align-items:center;gap:8px;flex:none;}
.icon-btn{
  width:40px;height:40px;border-radius:6px;
  background:var(--elev);display:grid;place-items:center;
  color:var(--text-2);transition:color .18s ease, background .18s ease;
}
.icon-btn:hover{color:var(--text);background:var(--surface-1);}
.avatar{
  width:36px;height:36px;border-radius:18px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:var(--text-on-accent);font-family:var(--mono);font-size:14px;font-weight:500;
  margin-left:2px;
}

.shell{flex:1;min-height:0;display:flex;}

/* ---------- sidebar ---------- */
.sidebar{
  width:240px;flex:none;
  background:var(--sidebar);
  border-right:1px solid var(--border);
  padding:16px;
  display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;
  transition:background .24s ease, border-color .24s ease;
}
.side-label{
  font-family:var(--mono);font-size:11px;font-weight:500;
  color:var(--text-3);letter-spacing:.08em;
  padding:2px 2px 8px;
}
.cat{
  display:flex;align-items:center;gap:12px;
  padding:10px;border-radius:6px;
  color:var(--text-2);
  transition:background .16s ease,color .16s ease;
  text-align:left;width:100%;
}
.cat svg{flex:none;color:var(--text-2);transition:color .16s ease;}
.cat .name{flex:1;font-size:14px;font-weight:400;}
.cat .num{font-family:var(--mono);font-size:12px;color:var(--text-3);}
.cat:hover{background:rgba(15,23,42,.045);color:var(--text);}
.cat:hover svg{color:var(--text);}
.cat.active{background:var(--accent-a);color:var(--accent);}
.cat.active .name{font-weight:600;letter-spacing:.1px;}
.cat.active svg{color:var(--accent);}
.cat.active .num{color:var(--text-3);}

/* ---------- main ---------- */
.main{flex:1;min-width:0;padding:28px;overflow-y:auto;}
.page{display:flex;flex-direction:column;gap:18px;}
.page.tool{height:calc(100vh - 64px - 56px);}
.page.tool .editor{flex:1;min-height:0;}

.pagerow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.page-title{font-size:24px;font-weight:700;margin:0 0 4px;color:var(--text);letter-spacing:.2px;}
.page-sub{font-size:13px;color:var(--text-2);margin:0;}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--r-btn);
  background:var(--elev);border:1px solid var(--border);
  color:var(--text-2);font-size:13px;
  cursor:pointer;white-space:nowrap;
  transition:border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.pill:hover{border-color:var(--border-2);color:var(--text);}
/* 原生 select 已被 customSelect 接管，通过 .cs-wrap / .cs-trigger 渲染 */

/* ---------- card grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:16px;
}
.card{
  position:relative;
  display:flex;flex-direction:column;gap:6px;
  padding:14px;min-height:100px;
  border-radius:var(--r-card);
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  text-align:left;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .24s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-c);
  background:var(--surface-4);
  box-shadow:var(--shadow-card-hover);
}
.card-ico{height:24px;display:flex;align-items:center;color:var(--accent);}
.card-ico svg{display:block;}
.card h3{font-size:15px;font-weight:500;margin:0;color:var(--text);letter-spacing:.2px;}
.card p{font-size:12px;line-height:18px;margin:0;color:var(--text-2);}

.empty{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:72px 20px;
  border:1px dashed var(--border);border-radius:var(--r-card);
  color:var(--text-3);
}
.empty strong{color:var(--text-2);font-size:15px;font-weight:500;}
.empty span{font-size:13px;}

/* ---------- tool header ---------- */
.tool-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.tool-head h1{font-size:22px;font-weight:700;margin:0 0 4px;color:var(--text);letter-spacing:.2px;}
.tool-head p{font-size:13px;color:var(--text-2);margin:0;}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px;border-radius:999px;
  background:var(--accent-a);
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent);
  white-space:nowrap;flex:none;
}
.badge i{width:8px;height:8px;border-radius:4px;background:var(--accent);display:block;}

/* ---------- toolbar ---------- */
.toolbar{
  display:flex;align-items:center;justify-content:flex-end;
  gap:16px;padding:4px 0;margin-bottom:14px;flex-wrap:wrap;
}
.toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.toolbar-right{display:flex;align-items:center;gap:10px;margin-left:auto;}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:var(--r-btn);
  font-size:13px;white-space:nowrap;line-height:1;border:none;background:none;
  transition:filter .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn.primary{background:var(--accent);color:var(--text-on-accent);font-weight:500;}
.btn.primary:hover{filter:brightness(1.08);}
.btn.ghost{background:var(--elev);border:1px solid var(--border);color:var(--text-2);}
.btn.ghost:hover{color:var(--text);border-color:var(--accent-b);}
.btn:active{transform:translateY(1px);}

.opt-label{font-size:13px;color:var(--text-2);}
.opt-group{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2);}
.opt{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 8px;border-radius:var(--r-btn);
  background:var(--elev);border:1px solid var(--border);
  font-family:var(--mono);font-size:13px;color:var(--text);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.opt:hover{border-color:var(--border-2);}
/* 原生 select 已被 customSelect 接管 */

/* ---------- custom select ---------- */
.cs-wrap{position:relative;display:inline-flex;align-items:center;}
/* 隐藏原生 select，但保留可聚焦（便于键盘可访问） */
.cs-wrap select{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
  outline:none !important;
  box-shadow:none !important;
  border:none !important;
}
/* 全链路干掉浏览器默认 focus-visible 方框 */
.cs-wrap:focus,
.cs-wrap:focus-within,
.cs-wrap:focus-visible,
.cs-trigger:focus,
.cs-trigger:focus-visible,
.cs-menu:focus,
.cs-menu:focus-visible,
.cs-item:focus,
.cs-item:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
.cs-trigger{
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;outline:none;  /* 干掉 trigger 的 focus 方框 */
  padding:0 16px;               /* 左右对称，箭头也居中 */
  background-image:var(--chevron);
  background-repeat:no-repeat;
  background-position:right 4px center;
  background-size:12px;
  transition:border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.cs-wrap:hover .cs-trigger{color:var(--text);background-image:var(--chevron-hover);}
.cs-wrap.open .cs-trigger{background-image:var(--chevron-hover);}
/* open 状态高亮交给外层容器，trigger 自己不画任何框 */
.pill.cs-open{border-color:var(--accent-d);box-shadow:0 0 0 3px var(--accent-e);}
.opt.cs-open{border-color:var(--accent-d);box-shadow:0 0 0 3px var(--accent-e);}
.cs-menu{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  z-index:50;
  background:var(--surface-3);
  border:1px solid var(--border-2);
  border-radius:var(--r-btn);
  padding:4px;
  min-width:max-content;
  box-shadow:0 8px 24px rgba(0,0,0,.20);
  animation:csIn .12s ease-out;
}
@keyframes csIn{
  from{opacity:0;transform:translate(-50%, -4px);}
  to{opacity:1;transform:translateX(-50%);}
}
.cs-item{
  display:block;text-align:center;
  padding:7px 14px;border-radius:4px;cursor:pointer;
  font-size:13px;color:var(--text);
  font-family:inherit;
  transition:background .12s ease, color .12s ease;
  white-space:nowrap;
}
.cs-item:hover{background:var(--overlay);color:var(--text);}
.cs-item.active{color:var(--accent);font-weight:500;}
/* 浅色下 .cs-menu 阴影换成偏暖灰 */
[data-theme="light"] .cs-menu{box-shadow:0 8px 24px rgba(43,43,43,.10);}

/* ---------- editor ---------- */
.editor{display:flex;gap:16px;flex:1;min-height:300px;}
.panel{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  border-radius:var(--r-card);
  background:var(--elev);
  border:1px solid var(--border);
  overflow:hidden;
  transition:background .24s ease, border-color .24s ease;
}
.panel.accent{border-color:var(--accent);}
.panel-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px;
}
.panel-head .label{
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text-2);
}
.panel-head .meta{
  font-family:var(--mono);font-size:12px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.panel.accent .panel-head .label,
.panel.accent .panel-head .meta{color:var(--accent);}
.panel-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px;overflow:auto;}

.editor-pane{
  width:100%;flex:1;min-height:0;
  border:0;outline:0;resize:none;background:transparent;
  font-family:var(--mono);font-size:14px;line-height:22px;
  color:var(--text);caret-color:var(--accent);
}
.editor-pane::placeholder{color:var(--text-3);}
.out-text{
  margin:0;font-family:var(--mono);font-size:14px;line-height:22px;
  color:var(--out);white-space:pre-wrap;word-break:break-word;
}
.out-text.err{color:var(--danger);}

.stack{display:flex;flex-direction:column;gap:10px;height:100%;}
.mini-label{font-family:var(--mono);font-size:12px;color:var(--text-3);}
.mini-input{
  width:100%;border:1px solid var(--border);border-radius:4px;
  background:var(--surface-2);padding:10px 12px;outline:0;
  font-family:var(--mono);font-size:13px;color:var(--text);
}
.mini-input:focus{border-color:var(--accent-d);}

.statusbar{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px;border-radius:6px;margin-top:12px;
  background:var(--elev);border:1px solid var(--border);
  font-family:var(--mono);font-size:12px;
  transition:background .24s ease, border-color .24s ease;
}
.statusbar .l{color:var(--text-2);}
.statusbar .r{color:var(--text-3);}
.statusbar .status-item{color:var(--text-2);font-size:12px;}

/* ---------- markdown preview ---------- */
.md{font-family:var(--sans);font-size:14px;line-height:1.75;color:var(--text);}
.md h1,.md h2,.md h3{margin:0 0 10px;line-height:1.35;}
.md h1{font-size:22px;} .md h2{font-size:18px;} .md h3{font-size:15px;}
.md p{margin:0 0 10px;color:var(--text-2);}
.md ul,.md ol{margin:0 0 10px;padding-left:20px;color:var(--text-2);}
.md li{margin:4px 0;}
.md code{
  font-family:var(--mono);font-size:12.5px;
  background:var(--accent-f);color:var(--out);
  padding:2px 6px;border-radius:3px;
}
.md pre{
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;
  padding:12px;overflow:auto;margin:0 0 12px;
}
.md pre code{background:none;padding:0;color:var(--out);}
.md blockquote{
  margin:0 0 10px;padding:8px 12px;
  border-left:2px solid var(--accent);color:var(--text-2);
  background:var(--accent-g);border-radius:0 4px 4px 0;
}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.stat{
  border:1px solid var(--border);border-radius:6px;
  background:var(--surface-2);padding:14px;
}
.stat b{
  display:block;font-family:var(--mono);font-size:24px;font-weight:500;
  color:var(--out);line-height:1.2;
}
.stat span{display:block;margin-top:4px;font-size:12px;color:var(--text-3);}

/* ---------- diff ---------- */
.diff{width:100%;font-family:var(--mono);font-size:12.5px;line-height:20px;white-space:pre-wrap;word-break:break-word;}
.diff .same{color:var(--text-2);display:block;}
.diff .add{color:var(--diff-add);background:var(--diff-add-bg);display:block;}
.diff .del{color:var(--diff-del);background:var(--diff-del-bg);display:block;}
.diff .ln{color:var(--text-3);user-select:none;}

/* ---------- qr ---------- */
.qr-stage{flex:1;display:grid;place-items:center;padding:16px;}
.qr-card{
  width:240px;height:240px;border-radius:8px;background:#fff;
  display:grid;place-items:center;
  box-shadow:var(--shadow-qr);
  overflow:hidden;
}
.qr-card canvas{display:block;width:100%;height:100%;}

/* ---------- sms calc & phone clean ---------- */
.sms-stat{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-card);padding:12px 14px;margin-bottom:6px;
}
.sms-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 0;border-bottom:1px dashed var(--border);
  font-size:13px;color:var(--text-2);
}
.sms-row:last-child{border-bottom:none;padding-bottom:0;}
.sms-row strong{
  font-size:20px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;
  margin-left:auto;text-align:right;
}
.sms-row em{font-style:normal;font-size:12px;color:var(--text-3);margin-left:4px;}
.sms-row.highlight strong{color:var(--accent);}
.sms-note{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-card);padding:8px 12px;
  font-size:12px;color:var(--text-3);line-height:1.7;
}
.sms-note-title{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:4px;}

/* sms 三栏布局 */
.sms3col, .textadd3col{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr;
  gap:16px;flex:1;min-height:0;align-content:stretch;
}
.sms3col .panel, .textadd3col .panel{min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.sms3col .panel-body, .textadd3col .panel-body{flex:1;min-height:0;display:flex;flex-direction:column;}
.sms3col .panel:last-child .panel-body{flex:none;}
.sms3col .editor-pane, .textadd3col .editor-pane{width:100%;flex:1;min-height:200px;resize:none;}
.textadd3col .out-text{width:100%;flex:1;min-height:200px;margin:0;overflow:auto;}
@media (max-width:1080px){
  .sms3col{grid-template-columns:1fr 1fr;}
  .sms3col .panel:last-child{grid-column:1 / -1;}
  .textadd3col{grid-template-columns:1fr 1fr;}
  .textadd3col .panel:last-child{grid-column:1 / -1;}
}
@media (max-width:720px){
  .sms3col, .textadd3col, .pwd-layout{grid-template-columns:1fr;}
}

/* ---- 随机密码生成 ---- */
.pwd-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  flex:1;min-height:0;align-content:stretch;
}
.pwd-layout .panel{min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.pwd-layout .panel-body{flex:1;min-height:0;display:flex;flex-direction:column;}
.pwd-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}
.pwd-label{flex-shrink:0;width:68px;font-size:13px;color:var(--text-2);padding-top:4px;}
.pwd-options{display:flex;flex-wrap:wrap;gap:8px;flex:1;}
.chk{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--text-1);cursor:pointer;user-select:none;}
.chk input[type="checkbox"]{width:13px;height:13px;accent-color:var(--accent-c);}
.chk-inline{gap:6px;align-items:center;}
.chk-inline input[type="text"]{
  width:110px;height:24px;padding:0 6px;
  border:1px solid var(--border);border-radius:4px;
  background:var(--surface-2);color:var(--text-1);
  font-size:12px;font-family:var(--mono);
}
.chk-inline input[type="text"]:disabled{opacity:.45;cursor:not-allowed;}
.pwd-strength{
  margin-top:12px;padding:10px 12px;border-radius:6px;
  background:var(--surface-2);border:1px solid var(--border);
}
.pwd-strength-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--text-2);padding:3px 0;
}
.pwd-strength-row strong{color:var(--accent-c);font-weight:600;}
.hist-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 8px;border-bottom:1px dashed var(--border);
  font-size:13px;gap:12px;
}
.hist-item code{font-family:var(--mono);color:var(--text-1);}
.hist-item em{font-style:normal;color:var(--text-3);font-size:12px;}

/* ---- 日期计算器 ---- */
.datecalc2col{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  flex:1;min-height:0;align-content:stretch;
}
.datecalc2col .panel{min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.datecalc2col .panel-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px 20px;}
.datecalc-table{width:100%;border-collapse:separate;border-spacing:0 10px;}
.datecalc-table td.label{
  width:86px;font-size:13px;color:var(--text-2);padding-right:12px;
  vertical-align:middle;white-space:nowrap;
}
.datecalc-table td{font-size:13px;color:var(--text-1);vertical-align:middle;}
.datecalc-table .mini-input{
  width:72px;height:28px;padding:0 6px;margin-right:4px;
  border:1px solid var(--border);border-radius:4px;
  background:var(--surface-2);color:var(--text-1);font-size:13px;font-family:var(--sans);
}
.datecalc-table .mini-input:focus{border-color:var(--accent-c);outline:none;}
@media (max-width:720px){
  .datecalc2col{grid-template-columns:1fr;}
}

.toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);
  background:var(--card);border:1px solid var(--accent-b);
  color:var(--text);font-size:13px;
  padding:10px 16px;border-radius:6px;
  box-shadow:var(--shadow-toast);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  z-index:50;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ---------- brand icon fill（JS 模板里用 var(--brand-fill) 替换） ---------- */
.brand-mark svg rect:first-child,
.brand-mark svg > rect{fill:var(--brand-fill) !important;}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .search{width:240px;}
}
@media (max-width:860px){
  .topbar{padding:0 16px;gap:12px;}
  .brand-name{display:none;}
  .search{width:auto;flex:1;}
  .shell{flex-direction:column;}
  .sidebar{
    width:100%;flex:none;flex-direction:row;gap:6px;
    padding:10px 12px;overflow-x:auto;overflow-y:hidden;
    border-right:0;border-bottom:1px solid var(--border);
  }
  .side-label{display:none;}
  .cat{width:auto;padding:8px 12px;gap:8px;}
  .cat .num{display:none;}
  .cat .name{white-space:nowrap;font-size:13px;}
  .main{padding:18px;}
  .editor{flex-direction:column;min-height:0;}
  .panel{min-height:260px;}
  .grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .pagerow{flex-direction:column;align-items:stretch;}
  .tool-head{flex-direction:column;}
  .stats{grid-template-columns:1fr;}
  .qr-card{width:200px;height:200px;}
}