/* MOKLAV tools UI 2026-10-23 — matched to www.moklav.co.jp design system
   (navy #181F32 / cyan #50BDEB, BIZ UDPGothic, radius 12, panel .ovc cards).
   Uses the shared kit tokens (--mk-*) so light/dark follows the kit. */

/* ---- index hero meta pills ---- */
.herometa{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.herometa span{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:4px 14px;font-size:.9rem;font-weight:700;color:var(--ink)}
.privacy-badge{margin-top:10px}

/* ---- category chips (sticky) ---- */
.catnav{position:sticky;top:76px;z-index:20;background:var(--bg);padding:10px 0;margin:0 0 8px}
.catnav a{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;text-decoration:none;background:var(--card);
  color:var(--ink);font-weight:700;font-size:.95rem;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.catnav a:hover{border-color:var(--mk-cyan,#50BDEB);color:var(--blue)}
.catnav .cnt{background:var(--mk-brand-soft,#e3f5fc);color:var(--mk-navy,#181F32);
  border-radius:999px;font-size:.75rem;padding:1px 8px;font-weight:800}
[data-theme=dark] .catnav .cnt{color:var(--mk-cyan,#50BDEB)}

/* ---- category sections ---- */
.catsec{margin:26px 0 6px}
.catsec .cat{display:flex;align-items:center;gap:10px;font-size:1.35rem;margin:0 0 14px;
  padding-left:12px;border-left:5px solid var(--mk-cyan,#50BDEB);scroll-margin-top:130px}
.catsec .catcnt{background:var(--mk-navy,#181F32);color:#fff;border-radius:999px;
  font-size:.78rem;padding:2px 10px;font-weight:800}
[data-theme=dark] .catsec .catcnt{background:var(--mk-cyan,#50BDEB);color:var(--mk-navy,#181F32)}

/* ---- tool cards (main-site .ovc pattern) ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px}
.tcard{display:flex;gap:14px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-top:4px solid var(--mk-cyan,#50BDEB);
  border-radius:12px;padding:18px;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  transition:box-shadow .15s,transform .15s}
.tcard:hover{box-shadow:0 12px 32px rgba(16,24,40,.12);transform:translateY(-2px);text-decoration:none}
.tcard .ticon{flex:0 0 auto;width:44px;height:44px;border-radius:10px;
  background:var(--mk-brand-soft,#e3f5fc);color:var(--mk-navy,#181F32);
  display:grid;place-items:center}
.tcard .ticon svg{width:24px;height:24px}
[data-theme=dark] .tcard .ticon{color:var(--mk-cyan,#50BDEB)}
.tcard .tbody{flex:1;min-width:0}
.tcard .tbody b{display:block;font-size:1.02rem;line-height:1.45;color:var(--ink);margin:1px 0 5px}
.tcard .tbody small{display:block;color:var(--mut);font-size:.86rem;line-height:1.55}
.tcard .tgo{flex:0 0 auto;color:var(--mk-cyan,#50BDEB);font-weight:800;font-size:1.15rem;margin-top:2px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tcard .ticon{color:var(--mk-cyan,#50BDEB)}
  :root:not([data-theme=light]) .catsec .catcnt{background:var(--mk-cyan,#50BDEB);color:var(--mk-navy,#181F32)}
  :root:not([data-theme=light]) .catnav .cnt{color:var(--mk-cyan,#50BDEB)}}

/* ---- slim sub-nav on tool pages (replaces the 25-tab wall) ---- */
.toolnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px}
.toolnav .tn-home{background:var(--mk-navy,#181F32);color:#fff;border-radius:999px;
  padding:6px 16px;text-decoration:none;font-weight:700;font-size:.92rem}
.toolnav .tn-home:hover{background:var(--mk-cyan,#50BDEB);color:var(--mk-navy,#181F32)}
.toolnav .tn-cat{border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:5px 13px;text-decoration:none;font-size:.9rem;font-weight:600}
.toolnav .tn-cat:hover{border-color:var(--mk-cyan,#50BDEB);color:var(--blue)}

/* ---- PWA install button (created by pwa.js) ---- */
.pwa-fab{position:fixed;right:16px;bottom:16px;z-index:80;background:var(--mk-navy,#181F32);
  color:#fff;border:1px solid var(--mk-cyan,#50BDEB);border-radius:999px;padding:12px 20px;
  font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;
  box-shadow:0 12px 32px rgba(16,24,40,.25)}
.pwa-fab:hover{background:var(--mk-cyan,#50BDEB);color:var(--mk-navy,#181F32)}

/* tools6: category nav current page */
.catnav a.on{border-color:var(--blue);color:var(--blue);font-weight:700}