:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e6eaf2;
  --primary:#2b6fff;
  --primary-2:#0c1675;
  --shadow:0 12px 32px rgba(15,23,42,.08);
  --shadow-sm:0 6px 18px rgba(15,23,42,.06);
  --radius:14px;

  /* header */
  --header-bg: rgba(246,247,251,.92);
  --header-safe: 92px; /* PC 预留高度 */
}
@media (max-width:768px){
  :root{ --header-safe: 82px; }
}

/* ============ Layout / Container ============ */
/* 不要在 #full-container 上额外加 padding，避免和 .container padding 叠加导致偏移 */
body{ background:var(--bg); color:var(--text); }

/* 让 Bootstrap 的 .container 直接承担 1120 宽度与居中（最干净） */
.container{
  max-width:1120px !important;
}

/* 页面主体：给 sticky header 让位 */
main.tool-wrap{
  padding: calc(26px + var(--header-safe)) 0 90px;
}
@media (min-width:992px){
  main.tool-wrap{ padding: calc(26px + var(--header-safe)) 0 60px; }
}

/* ============ Header (sticky + 背景) ============ */
#header{
  position:sticky;
  top:0;
  z-index:9990;
  background: var(--header-bg);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}

/* header-bar 本身不要再铺白色，保持透明 */
#header .header-bar{ background: transparent; }
#header .header-bar-wrap{ padding:12px 0; }

/* 关键：这条胶囊必须“真的居中”——不要让左右 padding 叠加造成视觉偏移 */
#header .hb-content{
  display:flex;
  align-items:center;
  gap:14px;

  /* 胶囊外观 */
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(230,234,242,.92);
  box-shadow: var(--shadow-sm);

  /* 居中与宽度逻辑 */
  width: 100%;
  max-width: 1120px;     /* 和 container 一致 */
  margin: 0 auto;        /* 强制居中 */
}

/* Logo */
.logo-header img{ height:28px; width:auto; }
.logo-header h3{ font-size:16px; line-height:1; margin:0; }
.logo-header span{ color:var(--muted); font-size:12px; line-height:1.1; }
.colored{ color:var(--primary); }

/* 中间广告区：占据中间空间，文本居中截断 */
.header-ad{
  flex:1;
  min-width:0;
  display:flex;
  justify-content:center;
}
.header-ad ul{ margin:0; padding:0; list-style:none; }
.header-ad a{
  display:block;
  max-width:520px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--primary-2);
  font-weight:800;
  font-size:14px;
  text-decoration:none;
}
@media (max-width:768px){
  .header-ad{ justify-content:flex-start; }
  .header-ad a{ max-width:100%; font-size:13px; }
}

/* 右侧胶囊按钮（PC） */
.pc-tools-nav{
  display:flex;
  gap:10px;
  margin-left:auto;
  align-items:center;
}
.pc-tools-nav a{
  padding:8px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  color:rgba(15,23,42,.82);

  background: rgba(255,255,255,.85);
  border:1px solid rgba(230,234,242,.95);
  box-shadow:0 6px 16px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.pc-tools-nav a:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
  border-color: rgba(43,111,255,.22);
  background: rgba(241,245,255,.9);
}
.pc-tools-nav a.active{
  color: var(--primary);
  background: rgba(43,111,255,.12);
  border-color: rgba(43,111,255,.30);
  box-shadow:0 10px 22px rgba(43,111,255,.16);
}
@media (max-width:768px){
  .pc-tools-nav{ display:none; }
}

/* ============ Tool Card ============ */
.tool-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow);
}
.tool-title{ font-weight:900; margin:0 0 10px; }
.tool-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:768px){
  .tool-grid{ grid-template-columns:1fr; }
}

/* Inputs */
textarea.tool-input,
textarea.tool-output{
  width:100%;
  min-height:170px;
  border-radius:14px;
  border:1px solid #e6eaf0;
  background:#fbfcff;
  padding:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;
  color:var(--text);
}
textarea.tool-output{ min-height:160px; }
textarea:focus{
  outline:none;
  border-color:rgba(43,111,255,.55);
  box-shadow:0 0 0 .22rem rgba(43,111,255,.12);
  background:#fff;
}

/* Actions + countdown */
.tool-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.ring{ position:relative; width:56px; height:56px; }
.ring svg{ transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:rgba(15,23,42,.08); stroke-width:8; }
.ring-fg{ fill:none; stroke:var(--primary); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .25s linear; }
.ring-text{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; color:var(--text); }

/* Pages */
.tool-page{ display:none; }
.tool-page.active{ display:block; }

/* Bottom tabs (mobile) */
.bottom-tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  height:60px;
  background:rgba(15,15,19,.92);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:space-around; align-items:center;
}
.bottom-tabs a{
  flex:1; text-align:center; padding:10px 6px;
  color:rgba(255,255,255,.70);
  font-size:12px;
  text-decoration:none;
}
.bottom-tabs a.active{ color:#fff; font-weight:800; }
.bottom-tabs i{ display:block; font-size:16px; margin-bottom:2px; }
@media (min-width:992px){
  .bottom-tabs{ display:none; }
}

/* Footer */
footer{ color:var(--muted); }

@media (max-width:480px){
  #tool-2fa textarea,
  #tool-encode textarea,
  #tool-convert textarea{
    height:120px !important;
    line-height:20px !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
}
/* ============ Bootstrap3 container 宽度强制接管 ============ */
/* 关键：覆盖 width，而不是 max-width */
@media (min-width:768px){
  .container{ width:100% !important; max-width:1120px !important; }
}
@media (min-width:992px){
  .container{ width:100% !important; max-width:1120px !important; }
}
@media (min-width:1200px){
  .container{ width:100% !important; max-width:1120px !important; }
}

/* 保险：避免某些地方写死 1170 */
.container{ width:100% !important; }
/* =========================
   1) Bootstrap3 container 宽度接管（核心修复：用 width 而不是 max-width）
   ========================= */
@media (min-width:768px){
  .container{ width:100% !important; max-width:1120px !important; }
}
@media (min-width:992px){
  .container{ width:100% !important; max-width:1120px !important; }
}
@media (min-width:1200px){
  .container{ width:100% !important; max-width:1120px !important; }
}

/* =========================
   2) Sticky header 不挡内容 + header 底色统一
   ========================= */
:root{
  --header-safe: 92px;
  --header-bg: rgba(246,247,251,.92);
}
@media (max-width:768px){
  :root{ --header-safe: 82px; }
}

#header{
  position: sticky !important;
  top: 0;
  z-index: 9990;
  background: var(--header-bg) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}

/* 把 header 区域可能铺白底的层统一成 header-bg（避免“上白下有色”） */
#header #header-bar-1,
#header .header-bar,
#header .header-bar-wrap{
  background: transparent !important;
}
#header::before,#header::after,
#header #header-bar-1::before,#header #header-bar-1::after,
#header .header-bar::before,#header .header-bar::after,
#header .header-bar-wrap::before,#header .header-bar-wrap::after{
  background: transparent !important;
  box-shadow: none !important;
}

/* 正文让位：只影响 main.tool-wrap，不影响别处 */
main.tool-wrap{
  padding-top: calc(26px + var(--header-safe)) !important;
}

/* header 胶囊条：依附栅格体系，不自己搞居中，避免 row:-15px 造成错觉 */
#header .hb-content{
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(230,234,242,.92);
  box-shadow: var(--shadow-sm);
}

/* 右侧按钮胶囊（PC） */
.pc-tools-nav{ display:flex; gap:10px; margin-left:auto; align-items:center; }
.pc-tools-nav a{
  padding:8px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  color:rgba(15,23,42,.82);
  background: rgba(255,255,255,.85);
  border:1px solid rgba(230,234,242,.95);
  box-shadow:0 6px 16px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.pc-tools-nav a:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
  border-color: rgba(43,111,255,.22);
  background: rgba(241,245,255,.9);
}
.pc-tools-nav a.active{
  color: var(--primary);
  background: rgba(43,111,255,.12);
  border-color: rgba(43,111,255,.30);
  box-shadow:0 10px 22px rgba(43,111,255,.16);
}
@media (max-width:768px){
  .pc-tools-nav{ display:none; }
}

/* =========================
   3) Textarea 高度：PC 不变，手机变矮
   ========================= */
/* PC 默认高度（不动你原来 170/160 的设定即可；这里给一个明确值防止被别的规则误伤） */
@media (min-width:769px){
  textarea.tool-input{ min-height:170px !important; }
  textarea.tool-output{ min-height:160px !important; }
}

/* 手机端：更矮，保证一屏更容易放下 */
@media (max-width:480px){
  textarea.tool-input,
  textarea.tool-output{
    min-height:120px !important;   /* 只动 mobile */
    height:120px !important;
    line-height:20px !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
}
/* =========================
   工具页按钮尺寸压缩（不影响全站 CTA）
   ========================= */
.tool-actions .btn{
  padding: 10px 18px;      /* 原来是 17px 35px，太夸张 */
  font-size: 13px;
  line-height: 1.2;        /* 关键：去掉 1.75 的“撑高感” */
  border-width: 1.5px;     /* 2px 在小按钮上显厚 */
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* 圆角胶囊保持，但视觉更紧凑 */
.tool-actions .btn.rounded{
  border-radius: 999px;
}

/* 手机端再压一点，避免一屏放不下 */
@media (max-width:480px){
  .tool-actions .btn{
    padding: 9px 16px;
    font-size: 12px;
  }
}

#tsOut{
  display:block;
  white-space: pre-line;      /* 让 \n 真换行 */
  line-height: 1.5;
}
/* =========================
   转换结果卡片（时间戳 / 单位）
   ========================= */
.result-box{
  display: block;
  margin-top: 10px;
  padding: 14px 16px;

  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 12px;

  font-size: 14px;
  line-height: 1.6;
  color: var(--text);

  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}

/* 主结果（第一行） */
.result-box .result-main{
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .2px;
  margin-bottom: 4px;
}

/* 次信息 */
.result-box .result-sub{
  color: var(--muted);
  font-size: 13px;
}

/* 可复制的暗示 */
.result-box.copyable{
  cursor: copy;
}
.result-box.copyable:hover{
  border-color: rgba(43,111,255,.35);
  box-shadow: 0 10px 26px rgba(43,111,255,.12);
}

/* 移动端略微压缩 */
@media (max-width:480px){
  .result-box{
    padding: 12px 14px;
    font-size: 13px;
  }
  .result-box .result-main{
    font-size: 14px;
  }
}
.btn.colorful:active {
  transform: translateY(1px);
  filter: brightness(.92);
}

.btn.colorful.active {
  background-color: #2570ff !important;
}
/* =========================================
   Tool buttons: fix "click becomes black" + unify interaction
   Put this at the END of custom.css
========================================= */

/* 1) 只在工具区重写，避免影响站内其他按钮 */
.tool-actions .btn{
  line-height: 1.2;
  padding: 10px 18px;
  font-size: 13px;
  border-width: 1.5px;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  text-shadow: none !important;
  text-decoration: none !important;
}

@media (max-width: 480px){
  .tool-actions .btn{
    padding: 9px 16px;
    font-size: 12px;
  }
}

/* 2) 主按钮：蓝色，hover/active/focus 都保持蓝色（不会变黑） */
.tool-actions .btn.colorful,
.tool-actions .btn.colorful:hover,
.tool-actions .btn.colorful:focus,
.tool-actions .btn.colorful:active,
.tool-actions .btn.colorful.active{
  background-color: #2570ff !important;
  border-color: #2570ff !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* 主按钮按压反馈（只做视觉动效，不改颜色） */
.tool-actions .btn.colorful:active{
  transform: translateY(1px);
  filter: brightness(.94);
}

/* 3) 次按钮：白底蓝边（例如 URL 编码/解码），hover 轻微填充 */
.tool-actions .btn:not(.colorful){
  background: #fff !important;
  border-color: rgba(37,112,255,.35) !important;
  color: #2570ff !important;
}

.tool-actions .btn:not(.colorful):hover,
.tool-actions .btn:not(.colorful):focus{
  background: rgba(37,112,255,.08) !important;
  border-color: rgba(37,112,255,.55) !important;
  color: #2570ff !important;
}

/* 4) 清空按钮：低调深色但不“粘住”，hover 才变深 */
.tool-actions #encClear,
.tool-actions #totpClear{
  background: rgba(15,23,42,.06) !important;
  border-color: rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.78) !important;
}

.tool-actions #encClear:hover,
.tool-actions #totpClear:hover{
  background: rgba(15,23,42,.10) !important;
  border-color: rgba(15,23,42,.16) !important;
  color: rgba(15,23,42,.90) !important;
}

/* 5) 关键修复：禁用模板的 hover-dark 在工具区的“黑化” */
.tool-actions .btn.hover-dark:hover,
.tool-actions .btn.dark:hover{
  /* 按钮颜色由上面规则接管，这里仅保证不会被模板盖掉 */
  background: inherit !important;
  border-color: inherit !important;
  color: inherit !important;
}

/* 6) 去掉 a:hover 的 underline（模板里会加） */
.tool-actions a:hover,
.tool-actions a:focus{
  text-decoration: none !important;
}

/* 修正勾选框尺寸与对齐 */
.uuid-options {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.custom-check {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #475569;
}

/* 强制重置 input 尺寸，防止继承缩放 */
.custom-check input[type="checkbox"] ,
.custom-check input[type="radio"]{
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px;
    cursor: pointer;
    accent-color: #2570ff; /* 使用你的主题蓝 */
    /* 核心：取消可能存在的缩放转换 */
    transform: none !important;
    -webkit-appearance: radio; /* 确保移动端渲染正常 */
}

/* 结果栏交互美化 */
.uuid-result-container {
    display: flex;
    flex-direction: column;
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 6px;
}

.click-tip {
    font-size: 12px;
    color: #94a3b8;
}

.click-to-copy {
    cursor: pointer !important;
    transition: background 0.2s;
}

.click-to-copy:hover {
    background-color: #f8fafc;
    border-color: #2570ff;
}

.click-to-copy:active {
    background-color: #f1f5f9;
}
    
    /* 优化布局间距 */
.hash-mode-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    align-items: center;
}