/*
Theme Name: TinyLab
Description: Lightweight theme for TinyLabTools — warm-white background, white cards, brand blue accents, no gradients.
Version: 1.0
*/
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#F7F7F5;color:#10233C;font-size:15px;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
.tlb{max-width:1240px;margin:0 auto}
/* Top bar */
.tlb .bar{background:#fff;border:1px solid #E6EAF0;border-radius:12px;margin:16px 22px 0;padding:12px 22px;display:flex;align-items:center;gap:24px;position:sticky;top:0;z-index:50;flex-wrap:wrap}
.tlb .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:20px;white-space:nowrap}
.tlb .mark{width:30px;height:30px;border-radius:8px;background:#2F7BFF;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.tlb .logo small{font-size:12px;color:#7186A3;font-weight:400}
.tlb .nav{display:flex;gap:18px;font-size:15px;color:#41546E;flex-wrap:wrap}
.tlb .nav ul{display:flex;gap:18px;flex-wrap:wrap;list-style:none}
.tlb .nav a:hover{color:#2F7BFF}
.tlb .nav .current-menu-item a{color:#2F7BFF;font-weight:600}
/* Homepage hero (solid brand blue, no gradient) */
.tlb .hero{background:#2F7BFF;padding:34px 22px;text-align:center;border-radius:12px;margin:16px 22px 0}
.tlb .hero h1{font-size:26px;line-height:1.35;margin-bottom:10px;color:#fff;max-width:820px;margin-left:auto;margin-right:auto}
.tlb .hero p{font-size:15px;color:rgba(255,255,255,.88);margin-bottom:18px}
.tlb .hero .cta{display:inline-block;background:#fff;color:#2F7BFF;font-weight:700;font-size:15px;padding:10px 30px;border-radius:24px}
.tlb .hero .cta:hover{background:#EDF3FF}
/* Content */
.tlb .main{padding:16px 22px 6px}
.tlb .card{background:#fff;border:1px solid #E6EAF0;border-radius:12px;padding:22px 24px;max-width:880px;margin:0 auto 16px}
.tlb .card h2{font-size:21px;margin-bottom:10px}
.tlb .card h3{font-size:17px;margin:18px 0 6px}
.tlb .card p{margin-bottom:10px;color:#33475E}
.tlb .card ul{margin:0 0 12px 20px;color:#33475E}
.tlb .card li{margin-bottom:4px}
.tlb .card a{color:#2F7BFF}
.tlb .card a:hover{text-decoration:underline}
/* Tool grid (hub) */
.tlb .toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1080px;margin:0 auto}
.tlb .tool{background:#fff;border:1px solid #E6EAF0;border-radius:12px;padding:16px 18px}
.tlb .tool b{font-size:15.5px;display:block;margin-bottom:4px}
.tlb .tool span{font-size:13.5px;color:#7186A3;display:block;line-height:1.5}
.tlb .soon{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;color:#7186A3;background:#F1F4F8;border-radius:20px;padding:2px 11px}
/* Footer */
.tlb .foot{margin-top:24px;padding:18px 22px 30px;text-align:center;font-size:13.5px;color:#7186A3}
.tlb .foot .flinks{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:10px;font-size:14px;color:#41546E}
.tlb .foot .flinks a:hover{color:#2F7BFF}
.tlb .foot .priv{color:#33475E;margin-bottom:6px}
.tlb .foot .priv b{color:#10233C}
/* Mobile: real phone widths */
@media (max-width:900px){
  .tlb .toolgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .tlb .bar{margin:12px 12px 0;padding:10px 14px;gap:12px}
  .tlb .logo{font-size:18px}
  .tlb .logo small{display:none}
  .tlb .nav{gap:12px;font-size:14px}
  .tlb .nav ul{gap:12px}
  .tlb .hero{margin:12px 12px 0;padding:24px 16px}
  .tlb .hero h1{font-size:21px}
  .tlb .hero p{font-size:14px}
  .tlb .main{padding:12px 12px 4px}
  .tlb .card{padding:18px 16px}
  .tlb .toolgrid{grid-template-columns:1fr}
  .tlb .foot{padding:16px 12px 26px}
}
/* Tool UI (shared by all tool pages) */
.tlb .tl-tool{font-size:15px}
.tlb .tl-lab{font-weight:600;margin:14px 0 6px}
.tlb .tl-ta{width:100%;border:1px solid #E6EAF0;border-radius:10px;padding:11px 13px;font-size:14.5px;line-height:1.55;color:#10233C;background:#fff;resize:vertical}
.tlb .tl-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}
.tlb .tl-in{border:1px solid #E6EAF0;border-radius:10px;padding:9px 11px;font-size:14.5px;color:#10233C;background:#fff}
.tlb .tl-btns{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.tlb .tl-btn{border:1px solid #E6EAF0;background:#fff;color:#10233C;font-weight:600;font-size:14.5px;padding:9px 20px;border-radius:24px;cursor:pointer}
.tlb .tl-btn:hover{border-color:#2F7BFF;color:#2F7BFF}
.tlb .tl-btn.pri{background:#2F7BFF;border-color:#2F7BFF;color:#fff}
.tlb .tl-btn.pri:hover{background:#1E6AE8;color:#fff}
.tlb .tl-stat{margin-top:12px;font-size:13.5px;color:#7186A3}
.tlb .tl-res{margin-top:12px;border:1px solid #E6EAF0;border-radius:10px;padding:10px 14px}
.tlb .tl-resrow{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14.5px}
.tlb .tl-resrow span{color:#7186A3}
.tlb .tl-opts{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;font-size:14.5px;color:#33475E}
.tlb .tl-opts label{display:flex;gap:6px;align-items:center}
.tlb .tl-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0}
.tlb .tl-out{white-space:pre-wrap;word-break:break-word;border:1px solid #E6EAF0;border-radius:10px;padding:12px 14px;font-size:13.5px;background:#F7F7F5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tlb .tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tlb .d-add{background:#E6F4EA}
.tlb .d-del{background:#FDECEA}
.tlb .tl-bar{height:10px;background:#EDF0F4;border-radius:6px;overflow:hidden;margin-top:6px}
.tlb .tl-bar i{display:block;height:100%;background:#2F7BFF}
.tlb .tl-bar.over i{background:#D92D20}
.tlb .tool a.go{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:#2F7BFF}
@media (max-width:640px){
  .tlb .tl-grid{grid-template-columns:1fr}
  .tlb .tl-resrow{flex-direction:column;gap:0}
}

/* LOGO B + Layout B (search-first) */
.tlb .logo svg{flex-shrink:0}
.tlb .logo .wordmark{font-size:21px;font-weight:800;letter-spacing:-.2px;white-space:nowrap}
.tlb .logo .wordmark b{color:#2F7BFF}
.tlb .search-hero{text-align:center;padding:40px 22px 8px}
.tlb .search-hero h1{font-size:30px;line-height:1.3;margin-bottom:10px}
.tlb .search-hero p{font-size:15px;color:#7186A3}
.tlb .search-form{display:flex;gap:8px;max-width:600px;margin:22px auto 0}
.tlb .search-form input{flex:1;min-width:0;border:1.5px solid #C9D4E4;border-radius:10px;padding:13px 16px;font-size:15px;color:#10233C;background:#fff}
.tlb .search-form button{background:#2F7BFF;color:#fff;border:0;border-radius:10px;padding:13px 22px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}
.tlb .search-form button:hover{background:#1E6AE8}
.tlb .popular{margin-top:16px;font-size:14px}
.tlb .popular a{color:#2F7BFF;font-weight:600}
.tlb .popular a:hover{text-decoration:underline}
.tlb .alltools{font-size:17px;max-width:1080px;margin:30px auto 12px}
.tlb .toolsearch{display:flex;gap:8px;max-width:880px;margin:0 auto 16px}
.tlb .toolsearch input{flex:1;min-width:0;border:1.5px solid #C9D4E4;border-radius:10px;padding:11px 14px;font-size:15px;color:#10233C;background:#fff}
.tlb .toolsearch button{background:#2F7BFF;color:#fff;border:0;border-radius:10px;padding:11px 20px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}
.tlb .toolsearch button:hover{background:#1E6AE8}
.tlb .noresults{text-align:center;color:#7186A3;font-size:14.5px;margin:18px 0}
@media (max-width:640px){
  .tlb .search-hero{padding:28px 12px 4px}
  .tlb .search-hero h1{font-size:24px}
  .tlb .search-form button{padding:13px 16px}
  .tlb .logo .wordmark{font-size:19px}
  .tlb .alltools{margin-top:22px}
}