/* ===== 唐左导航 - 样式（作用域限定 .tz-nav，避免与主题冲突） ===== */
.tz-nav{
  --bg:#F4F1EA;
  --surface:#FFFEFB;
  --surface-2:#ECE8DD;
  --text:#26231C;
  --text-2:#7A7466;
  --line:#E3DFD3;
  --accent:#C0392B;
  --accent-soft:rgba(192,57,43,.08);
  --shadow:rgba(60,50,30,.08);
  --mono-text:#FFFFFF;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  max-width:1080px;margin:0 auto;padding:24px 16px 48px;
  color:var(--text);line-height:1.5;font-size:16px;
  -webkit-font-smoothing:antialiased;
  position:relative;
  transition:background .25s,color .25s;
}
.tz-nav[data-theme="dark"]{
  --bg:#15161A;
  --surface:#1D1F25;
  --surface-2:#262933;
  --text:#E9E7E1;
  --text-2:#98938A;
  --line:#2B2E37;
  --accent:#E0664F;
  --accent-soft:rgba(224,102,79,.13);
  --shadow:rgba(0,0,0,.35);
  --mono-text:#FFFFFF;
}
.tz-nav *{box-sizing:border-box;margin:0;padding:0;}
.tz-nav [hidden]{display:none!important;}
.tz-nav a{color:inherit;text-decoration:none;}
/* 注意：这里不能重置 background/border，否则会以更高优先级压掉
   .tz-btn/.tz-tile 等组件自己定义的背景与边框（导致按钮透明、无边框） */
.tz-nav button{font-family:inherit;cursor:pointer;color:inherit;}
.tz-nav ::selection{background:var(--accent);color:#fff;}
.tz-nav :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
.tz-nav::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1100px 420px at 50% -8%,var(--accent-soft),transparent 70%);
}
/* 弹窗、遮罩、提示条位于 .tz-nav 之外，收不到 .tz-nav 上的 CSS 变量，
   必须镜像一份，否则 var(--surface) 解析失败导致背景透明 */
.tz-mask,.tz-modal,#tzToast{
  --bg:#F4F1EA;--surface:#FFFEFB;--surface-2:#ECE8DD;--text:#26231C;--text-2:#7A7466;
  --line:#E3DFD3;--accent:#C0392B;--accent-soft:rgba(192,57,43,.08);--shadow:rgba(60,50,30,.08);
}
body.tz-dark .tz-mask,body.tz-dark .tz-modal,body.tz-dark #tzToast{
  --bg:#15161A;--surface:#1D1F25;--surface-2:#262933;--text:#E9E7E1;--text-2:#98938A;
  --line:#2B2E37;--accent:#E0664F;--accent-soft:rgba(224,102,79,.13);--shadow:rgba(0,0,0,.35);
}
.tz-nav > *{position:relative;z-index:1;}

/* ===== 顶栏 ===== */
.tz-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0 0;}
.tz-brand{display:flex;align-items:center;gap:10px;}
.tz-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:700;}
.tz-name{font-size:16px;font-weight:700;letter-spacing:.02em;}
.tz-actions{display:flex;align-items:center;gap:8px;}
.tz-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 13px;border-radius:10px;font-size:13px;font-weight:600;line-height:1.4;
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  transition:background .15s,border-color .15s,transform .15s;
}
.tz-btn:hover{background:var(--surface-2);}
.tz-btn:active{transform:translateY(1px);}
.tz-btn.tz-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.tz-btn.tz-primary:hover{filter:brightness(1.06);background:var(--accent);}
.tz-btn.tz-danger{color:var(--accent);border-color:var(--accent);}
.tz-btn.tz-icon{width:34px;height:34px;padding:0;border-radius:10px;}
.tz-btn.tz-icon svg{width:16px;height:16px;}

/* ===== 编辑工具栏 ===== */
.tz-toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;padding:10px 12px;border:1px dashed var(--accent);
  border-radius:12px;background:var(--accent-soft);
}
.tz-toolbar-tip{font-size:12px;color:var(--text-2);margin-left:auto;}

/* ===== 时钟 ===== */
.tz-clock{text-align:center;padding:44px 0 4px;}
.tz-time{
  font-size:clamp(54px,9vw,92px);font-weight:600;letter-spacing:.02em;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.tz-date{margin-top:10px;font-size:15px;color:var(--text-2);letter-spacing:.04em;}

/* ===== 搜索 ===== */
.tz-search{max-width:640px;margin:28px auto 0;text-align:center;}
.tz-search-box{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:14px 18px;box-shadow:0 2px 14px var(--shadow);
  transition:border-color .15s,box-shadow .15s;
}
.tz-search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.tz-search-box svg{width:20px;height:20px;flex:none;color:var(--text-2);}
.tz-search-box input{
  flex:1;border:none;outline:none;background:none;color:var(--text);
  font-size:17px;font-family:inherit;
}
.tz-search-box input::placeholder{color:var(--text-2);}
.tz-engines{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px;}
.tz-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--text-2);border:1px solid transparent;transition:all .15s;
  background:transparent;
}
.tz-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--text-2);}
.tz-chip:hover{color:var(--text);background:var(--surface-2);}
.tz-chip.active{color:var(--text);border-color:var(--line);background:var(--surface);}
.tz-chip.active .dot{background:var(--accent);}
.tz-hint{margin-top:10px;font-size:12px;color:var(--text-2);}
.tz-hint kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line);border-radius:5px;background:var(--surface);font-family:inherit;font-size:11px;}

/* ===== 链接区 ===== */
.tz-links{padding:36px 0 8px;}
.tz-cat{margin-bottom:32px;}
.tz-cat-title{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--text-2);
  letter-spacing:.08em;margin-bottom:14px;
}
.tz-cat-title::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--accent);}
.tz-cat-count{font-size:11px;font-weight:600;color:var(--text-2);background:var(--surface-2);border-radius:999px;padding:1px 8px;}
.tz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(192px,1fr));gap:12px;}
.tz-tile{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:13px;
  padding:10px 14px;min-width:0;text-align:left;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
a.tz-tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px var(--shadow);border-color:var(--text-2);}
.tz-tile .tz-mono{
  width:38px;height:38px;border-radius:10px;flex:none;color:var(--mono-text);
  display:grid;place-items:center;font-size:14px;font-weight:700;letter-spacing:.02em;
}
.tz-tile-text{display:flex;flex-direction:column;min-width:0;}
.tz-tile-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tz-tile-host{font-size:11px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.tz-tile.tz-edit{cursor:pointer;position:relative;border-style:dashed;}
.tz-tile.tz-edit:hover{border-color:var(--accent);}
.tz-tile-del{
  position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);opacity:0;transition:opacity .15s;
}
.tz-tile.tz-edit:hover .tz-tile-del{opacity:1;}
.tz-tile-del svg{width:10px;height:10px;}
.tz-tile.tz-add{border-style:dashed;background:var(--surface);color:var(--text-2);justify-content:center;width:100%;}
.tz-tile.tz-add:hover{border-color:var(--accent);color:var(--accent);}
.tz-tile.tz-add .tz-mono{background:var(--surface-2);color:var(--text-2);}
.tz-tile.tz-add:hover .tz-mono{background:var(--accent-soft);color:var(--accent);}
.tz-tile.tz-add svg{width:16px;height:16px;}
.tz-cat-empty{
  grid-column:1/-1;padding:22px;text-align:center;font-size:13px;color:var(--text-2);
  border:1px dashed var(--line);border-radius:13px;
}

/* ===== 页脚 ===== */
.tz-foot{padding:26px 0 8px;text-align:center;font-size:12px;color:var(--text-2);}

/* ===== 弹窗 ===== */
.tz-mask{
  position:fixed;inset:0;background:rgba(20,18,14,.45);z-index:99998;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
body.tz-dark .tz-mask{background:rgba(0,0,0,.55);}
.tz-modal{
  width:100%;max-width:470px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:24px;box-shadow:0 20px 60px var(--shadow);
  position:relative;z-index:99999;
}
.tz-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.tz-modal-head h2{font-size:17px;font-weight:700;}
.tz-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.tz-field-label{font-size:13px;font-weight:600;color:var(--text-2);}
.tz-modal label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:16px;}
.tz-modal label span{display:block;margin-bottom:6px;}
.tz-modal input[type="text"]{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--text);font-size:14px;font-family:inherit;outline:none;
  transition:border-color .15s;
}
.tz-modal input:focus{border-color:var(--accent);}
.tz-colors{display:flex;gap:8px;flex-wrap:wrap;}
.tz-swatch{
  width:26px;height:26px;border-radius:50%;border:2px solid transparent;
  transition:transform .12s;
}
.tz-swatch:hover{transform:scale(1.12);}
.tz-swatch.on{border-color:var(--text);box-shadow:0 0 0 3px var(--surface),0 0 0 4.5px var(--text);}
.tz-modal-actions{display:flex;align-items:center;gap:8px;margin-top:22px;}
.tz-spacer{flex:1;}
.tz-modal-actions .tz-btn{padding:8px 16px;}

/* ===== 提示 ===== */
#tzToast{
  position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(16px);
  background:var(--text);color:var(--bg);padding:9px 18px;border-radius:999px;
  font-size:13px;font-weight:600;opacity:0;pointer-events:none;z-index:100000;
  transition:opacity .2s,transform .2s;
}
#tzToast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== 独立页面模式（绕过主题时的全屏适配） ===== */
body.tz-standalone{background:#F4F1EA;min-height:100vh;transition:background .25s;}
body.tz-standalone.tz-dark{background:#15161A;}
body.tz-standalone .tz-nav{min-height:100vh;}

/* 弹窗与文件选择器位于 .tz-nav 之外，scoped 的 [hidden] 管不到它们，
   必须单独声明，否则 display:flex 会压过 hidden 导致弹窗永远悬浮 */
.tz-mask[hidden],
#tzFile[hidden]{display:none!important;}

/* ===== 响应式 ===== */
@media (max-width:760px){
  .tz-nav{padding:16px 12px 40px;}
  .tz-topbar{padding-top:8px;}
  .tz-clock{padding-top:30px;}
  .tz-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;}
  .tz-tile{padding:9px 11px;gap:10px;}
  .tz-tile .tz-mono{width:34px;height:34px;font-size:13px;}
  .tz-tile-name{font-size:13px;}
  .tz-search-box{padding:12px 15px;}
  .tz-toolbar-tip{display:none;}
  .tz-modal{padding:20px;}
}
@media (max-width:420px){
  .tz-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tz-name{font-size:15px;}
  .tz-btn{padding:6px 10px;font-size:12px;}
}