/* ================= 应用外壳：左侧工具栏 ================= */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:232px;z-index:30;
  background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:16px;padding:20px 14px 14px;
}
.content{margin-left:232px;min-width:0}

.brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.brand-mark{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;
}
.brand-text strong{display:block;font-size:14.5px;line-height:1.25}
.brand-text small{color:var(--muted);font-size:11.5px}

.tool-nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.nav-group{font-size:11px;color:#9aa4b2;letter-spacing:.06em;padding:12px 10px 5px}
.tool-link{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:9px;
  color:#374151;text-decoration:none;font-size:14px;line-height:1.3;
}
.tool-link::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#cbd5e1;flex:0 0 auto;
}
.tool-link:hover{background:#f5f7fb;color:#111827}
.tool-link.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.tool-link.active::before{background:var(--accent)}

.nav-foot{font-size:11.5px;color:#9aa4b2;padding:10px 10px 2px;border-top:1px solid var(--line)}
.menu-btn{display:none}
.nav-overlay{display:none}

/* ================= 首页 ================= */
.home-head{padding:34px 20px 0;max-width:1080px;margin:0 auto}
.home-head h1{font-size:24px;margin:0 0 6px}
.home-head p{margin:0;color:var(--muted)}
.tool-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:16px;max-width:1080px;margin:20px auto 0;padding:0 20px;
}
.tool-card{
  position:relative;display:flex;flex-direction:column;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;
  text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.tool-card:hover{border-color:#bcd0fb;box-shadow:0 10px 28px rgba(37,99,235,.09);transform:translateY(-1px)}
.tool-card h3{margin:0;font-size:16px}
.tool-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}
.card-icon{
  width:38px;height:38px;border-radius:10px;margin-bottom:2px;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:700;font-size:15px;
}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.tags span{background:#f1f5f9;color:#475569;border-radius:999px;padding:2px 9px;font-size:11.5px}
.home-note{max-width:1080px;margin:20px auto 0;padding:0 20px;color:#9aa4b2;font-size:12.5px;text-align:center}

/* ================= 手机：工具栏变抽屉 ================= */
@media (max-width:900px){
  .sidebar{
    transform:translateX(-100%);transition:transform .22s ease;
    width:272px;box-shadow:0 12px 40px rgba(15,23,42,.2);
  }
  body.nav-open .sidebar{transform:none}
  body.nav-open{overflow:hidden}
  .content{margin-left:0}
  .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;
    position:fixed;left:12px;top:12px;z-index:40;
    width:40px;height:40px;border-radius:10px;
    border:1px solid var(--line);background:#fff;color:#374151;
    font-size:18px;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.06);
    transition:left .22s ease;
  }
  body.nav-open .menu-btn{left:220px}
  .nav-overlay{position:fixed;inset:0;background:rgba(15,23,42,.38);z-index:25}
  body.nav-open .nav-overlay{display:block}
  header, .home-head{padding-top:64px}
}