/* ============================================================
   kf369.cn 风格皮肤 —— kf369PDF工具箱
   设计基准：kf369.cn（onenav 主题）
   主题色 #f1404b / 页面底 #f9f9f9 / 侧栏 #f0f2f4 / 圆角 8px
   ============================================================ */

:root{
  --bg:#f9f9f9;
  --card-bg:#ffffff;
  --primary:#f1404b;
  --primary-hover:#d63440;
  --primary-light:#fdecee;
  --text:#282a2d;
  --text-secondary:#515c6b;
  --border:rgba(130,130,130,0.15);
  --danger:#dc2626;
  --radius-sm:8px;
  --radius:8px;
  --radius-lg:8px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --header-h:74px;
}

/* ---------- 全局 ---------- */
html{ scroll-behavior:smooth; }
body{
  background:#f9f9f9 !important;
  color:#282a2d !important;
  font-family:var(--font) !important;
  padding-left:220px;
  transition:padding-left .25s ease;
}
body, body *{ scrollbar-width:thin; scrollbar-color:#c9ccd1 transparent; }
body::-webkit-scrollbar{ width:8px; }
body::-webkit-scrollbar-thumb{ background:#c9ccd1; border-radius:4px; }

/* ============================================================
   左侧导航
   ============================================================ */
.kf-sidebar{
  position:fixed; left:0; top:0; bottom:0; width:220px;
  background:#f0f2f4; z-index:300;
  display:flex; flex-direction:column;
  font-family:var(--font);
  border-right:1px solid rgba(130,130,130,0.12);
  transition:transform .25s ease;
}
.kf-side-logo{
  height:74px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(130,130,130,0.15);
  padding:0 16px;
}
.kf-side-logo a{ display:flex; align-items:center; justify-content:center; width:100%; }
.kf-side-logo img{ height:40px; width:auto; max-width:100%; display:block; }

.kf-side-nav{ flex:1; overflow-y:auto; overflow-x:hidden; padding:6px 0 12px; }
.kf-side-nav::-webkit-scrollbar{ width:5px; }
.kf-side-nav::-webkit-scrollbar-thumb{ background:#d3d6da; border-radius:3px; }
.kf-side-nav ul{ list-style:none; margin:0; padding:0; }

.kf-nav-title{
  font-size:11px; color:#999; letter-spacing:.08em;
  padding:16px 18px 6px; text-transform:uppercase;
}
.kf-nav-item{
  position:relative;
  display:flex; align-items:center; gap:10px;
  margin:1.5px 8px; padding:11px 12px;
  font-size:14px; line-height:1.3; color:#515c6b;
  text-decoration:none; border-radius:6px;
  transition:background .15s ease,color .15s ease;
  cursor:pointer; user-select:none;
}
.kf-nav-item svg{
  width:16px; height:16px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.kf-nav-item span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf-nav-item em{
  margin-left:auto; font-style:normal; font-size:11px; line-height:1;
  color:#8a8f98; background:#e4e7ea; border-radius:9px; padding:3px 7px;
  transition:.15s;
}
.kf-nav-item:hover{ background:#fff; color:#f1404b; }
.kf-nav-item:hover em{ background:#fdecee; color:#f1404b; }
.kf-nav-item.kf-active{ background:#fff; color:#f1404b; font-weight:500; }
.kf-nav-item.kf-active em{ background:#f1404b; color:#fff; }
.kf-nav-item.kf-active::before{
  content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:#f1404b;
}
.kf-side-foot{
  flex-shrink:0; padding:14px 18px;
  border-top:1px solid rgba(130,130,130,0.12);
  font-size:12px; color:#999; text-align:center;
}
.kf-side-foot b{ color:#f1404b; font-weight:600; }

/* 侧栏开关（移动端） */
.kf-side-toggle{
  display:none; position:fixed; left:14px; top:16px; z-index:320;
  width:38px; height:38px; border-radius:8px; border:1px solid rgba(130,130,130,0.2);
  background:#fff; color:#515c6b; cursor:pointer;
  align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.kf-side-toggle svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.kf-side-mask{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:290;
}
.kf-side-mask.show{ display:block; }

/* ============================================================
   顶部 Header
   ============================================================ */
/* 原 app 顶栏内容（Logo / 分类 chips / 所有工具·关于 / 搜索框 / 副标题）全部隐藏，
   仅保留 [data-tab] 按钮于 DOM 中供脚本调用。 */
.header{
  background:#fff !important;
  border-bottom:1px solid rgba(130,130,130,0.15) !important;
  box-shadow:none !important;
  padding:0 !important;
  height:74px !important;
  min-height:74px !important;
  display:block !important;
  overflow:hidden !important;
  z-index:1080 !important;
}
.header-inner{ display:none !important; }

/* ---------- kf369 风格顶栏 ---------- */
.kf369-bar{ position:absolute; inset:0; height:74px; background:#fff; }
.kf369-mini{ position:absolute; left:16px; top:0; width:120px; height:74px; }
.kf369-ico{
  position:absolute; width:24px; height:24px; padding:0;
  border:none; background:transparent; cursor:pointer; color:#282a2d;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s ease;
}
.kf369-ico svg{
  width:21px; height:21px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round;
}
.kf369-ico:hover{ color:#f1404b; }
/* 与 kf369.cn 一致：☰ 居左上（顶栏放大镜已按要求去掉） */
.kf369-menu{ left:0; top:13px; }
/* 每日一言：在 ☰ 右侧的可用区域水平居中，去掉 240px 限宽 + nowrap，
   长句最多 2 行完整显示（74px 顶栏内 19px 行高 × 2 = 38px，垂直居中） */
.kf369-quote{
  position:absolute; left:152px; right:24px; top:50%; transform:translateY(-50%);
  font-size:14px; line-height:19px; color:#777;
  text-align:center;
  pointer-events:none;
}
.kf369-quote span{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; white-space:normal; overflow-wrap:break-word; max-height:38px;
}
.kf369-quote .kf369-quote-in{ animation:kf369QuoteIn .9s ease both; }
@keyframes kf369QuoteIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* 桌面端：☰ 收起 / 展开左侧导航 */
body.kf-side-collapsed{ padding-left:0; }
body.kf-side-collapsed .kf-sidebar{ transform:translateX(-100%); }

/* ============================================================
   主体
   ============================================================ */
.main-container{
  max-width:1400px; margin:0 auto;
  padding:20px 24px 40px !important;
}
.card{
  background:#fff !important;
  border:1px solid rgba(130,130,130,0.15) !important;
  border-radius:8px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.06) !important;
  padding:20px !important;
  margin-bottom:16px !important;
}

/* 首页头部：标题 + 搜索 */
.home-head{ margin-bottom:16px !important; }
.card-title{
  font-size:17px !important; font-weight:600 !important; color:#282a2d !important;
}
.card-title .icon-dot{ background:#f1404b !important; }
.card-title strong{ color:#f1404b !important; font-weight:600 !important; }
.home-search{
  background:#f0f2f4 !important; border:1px solid transparent !important;
  border-radius:8px !important; height:40px;
}
.home-search:focus-within{
  background:#fff !important; border-color:#f1404b !important;
  box-shadow:0 0 0 3px rgba(241,64,75,.12) !important;
}
.home-search input{
  font-size:14px !important; color:#282a2d !important;
  background:transparent !important;
}
.home-search input::placeholder{ color:#a0a4ab !important; }
.home-search-icon{ color:#999 !important; }

/* 分类组 */
.cat-group{ margin-bottom:20px !important; scroll-margin-top:80px !important; }
.cat-label{
  background:#fdecee !important; color:#f1404b !important;
  border-radius:100px !important; padding:4px 14px !important;
  font-size:13px !important; font-weight:500 !important;
}

/* 工具卡片 */
.tool-card{
  background:#fff !important;
  border:1px solid rgba(130,130,130,0.15) !important;
  border-radius:8px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.06) !important;
  padding:14px 10px 12px !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease !important;
}
.tool-card:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(241,64,75,.4) !important;
  box-shadow:0 6px 16px -6px rgba(241,64,75,.28) !important;
}
.tool-icon{ font-size:30px; margin-bottom:8px !important; }
.tool-name{ font-size:13.5px !important; font-weight:500 !important; color:#282a2d !important; }
.tool-desc{ font-size:12px !important; color:#999 !important; }
.new-badge{
  background:#f1404b !important; color:#fff !important;
  border-radius:100px !important; font-size:10px !important;
  padding:1px 7px !important;
}

/* 收藏夹功能已移除（入口 / 区块 / 卡片 ★ 按钮） */
.fav-section,
.fav-star-btn,
.fav-count-wrap{ display:none !important; }

/* ============================================================
   页脚
   ============================================================ */
#kf-footer{
  background:#fff; border-top:1px solid rgba(130,130,130,0.15);
  margin-top:24px; padding:28px 24px 32px;
  text-align:center; color:#999; font-size:13px; line-height:1.9;
}
#kf-footer .kf-copy{ margin:0; }
#kf-footer .kf-copy b{ color:#f1404b; font-weight:600; }
#kf-footer .kf-icp{ margin:6px 0 0; font-size:12px; color:#b0b4ba; }
#kf-footer .kf-links{ margin:10px 0 0; }
#kf-footer .kf-links a{
  color:#515c6b; text-decoration:none; margin:0 8px; font-size:13px;
  transition:color .15s;
}
#kf-footer .kf-links a:hover{ color:#f1404b; }

/* ============================================================
   悬浮按钮（右下角）
   ============================================================ */
.kf-fab{
  position:fixed; right:22px; z-index:250;
  width:40px; height:40px; border-radius:50%;
  background:#fff; color:#515c6b;
  border:1px solid rgba(130,130,130,0.2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.1);
  transition:.18s;
}
.kf-fab:hover{ background:#f1404b; color:#fff; border-color:#f1404b; transform:translateY(-2px); }
.kf-fab svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.kf-fab-top{ bottom:22px; }
.kf-fab-search{ bottom:72px; }
.kf-fab-home{ bottom:122px; }

/* ============================================================
   弹窗 / 表单（新增工具）
   ============================================================ */
#np-modal{ background:rgba(0,0,0,.45) !important; }
.np-dialog{
  background:#fff !important; border-radius:8px !important;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.25) !important;
  border:1px solid rgba(130,130,130,0.15) !important;
}
.np-title{ font-size:16px !important; font-weight:600 !important; color:#282a2d !important; }
.np-run{
  background:#f1404b !important; border-radius:6px !important;
  font-size:14px !important; font-weight:500 !important;
}
.np-run:hover{ background:#d63440 !important; }
.np-close{ color:#999 !important; }
.np-close:hover{ color:#f1404b !important; }
.np-field label{ color:#515c6b !important; font-size:13px !important; }
.np-field input,.np-field select,.np-field textarea{
  border:1px solid rgba(130,130,130,.25) !important; border-radius:6px !important;
  font-size:13.5px !important; color:#282a2d !important; background:#fff !important;
}
.np-field input:focus,.np-field select:focus,.np-field textarea:focus{
  border-color:#f1404b !important; box-shadow:0 0 0 3px rgba(241,64,75,.12) !important;
}
.np-result a,.np-result .np-file{
  color:#f1404b !important;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1199px){
  body{ padding-left:200px; }
  .kf-sidebar{ width:200px; }
}
@media (max-width: 991px){
  body{ padding-left:0; }
  /* 抽屉从顶栏下方滑出，避免 Logo 被顶栏（z=1080）遮挡 */
  .kf-sidebar{ top:74px; transform:translateX(-100%); box-shadow:none; }
  .kf-sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.2); }
  /* 顶栏 ☰ 已承担抽屉开关，隐藏原侧栏开关（它会被顶栏盖住） */
  .kf-side-toggle{ display:none; }
  .kf369-mini{ left:16px; }
  .kf369-quote{ left:60px; right:12px; max-width:none; font-size:12.5px; line-height:17px; }
}
@media (max-width: 767px){
  .main-container{ padding:14px 14px 32px !important; }
  .card{ padding:14px !important; }
  .kf-fab{ right:14px; }
}