/* ===== tools.css — Multi Tool Hub + individual tool pages (page chrome only; tool UIs ship their own tl-* styles) ===== */
.tool-hub, .tool-page { --accent: var(--blue); --accent-soft: #e0ecff; }
.tool-bar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.tool-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tab-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 99px; background: rgba(16,42,67,.08); font-size: .7rem; font-weight: 700; }
.tab.active .tab-n { background: rgba(255,255,255,.25); }
.tool-search { position: relative; flex: 1 1 260px; max-width: 380px; }
.tool-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.tool-search .sk-input { width: 100%; padding-left: 40px; }
.tool-count { font-size: .85rem; color: var(--muted); margin: 0 0 14px; }
.tool-empty { padding: 28px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }
.hidden { display: none !important; }
.tool-group { margin-bottom: 34px; }
.tool-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tool-group-head h2 { margin: 0; font-size: 1.3rem; }
.tool-group-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 1.1rem; }
.tool-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tool-grid-2 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tool-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.tool-card:hover, .tool-card:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 28px rgba(16,42,67,.12); }
.tool-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tool-card-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 1.25rem; }
.tool-card-body h3 { margin: 0 0 4px; font-size: 1rem; color: var(--navy); }
.tool-card-sh { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.badge.tl-live { background: #e2f6e9; color: #12803a; }
.badge.soon { background: #fff4d6; color: #8a6d00; }

/* individual tool page */
.tool-main { min-width: 0; }
.tool-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tool-shell { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 24px; }
.tool-shell-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tool-shell-head h2 { margin: 0; font-size: 1.15rem; }
.tool-mount { min-height: 140px; }
.tool-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 24px 0; }
.tool-planned { text-align: center; padding: 36px 22px; }
.tool-planned-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.tool-note { margin-bottom: 24px; }
.tool-how, .tool-about, .tool-related { margin-bottom: 28px; }
.tool-how h2, .tool-about h2, .tool-related h2 { font-size: 1.3rem; }
.tool-steps { margin: 0; }
.tool-pill { text-transform: none; }
.tool-aside-p { font-size: .88rem; color: var(--muted); margin: 0 0 10px; }
.tl-msg { padding: 10px 14px; border-radius: 10px; font-size: .9rem; margin-top: 10px; }
.tl-err { background: #fdecec; color: #b42318; }
@media (max-width: 640px) { .tool-search { max-width: none; } .tool-shell { padding: 16px; } }
@media print { .tool-bar, .tool-related, .tool-how { display: none; } }