/* Idiot Social Media Tools — main stylesheet */
:root{
  --indigo-50:#eef1ff;
  --indigo-500:#4f46e5;
  --indigo-600:#4338ca;
  --indigo-700:#3730a3;
  --slate-50:#f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1e293b;
  --slate-900:#0f172a;
  --white:#ffffff;
  --radius:10px;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 4px 14px rgba(15,23,42,.06);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--slate-800);
  background:var(--slate-50);
  line-height:1.6;
}
a{color:var(--indigo-600);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

.site-header{background:var(--white);border-bottom:1px solid var(--slate-200);position:sticky;top:0;z-index:100;}
.header-inner{display:flex;align-items:center;gap:24px;padding:14px 20px;max-width:var(--maxw);margin:0 auto}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.15rem;color:var(--slate-900)}
.logo .dot{width:10px;height:10px;border-radius:3px;background:var(--indigo-500);display:inline-block}
.main-nav{display:flex;gap:18px;margin-left:auto;align-items:center}
.main-nav a{color:var(--slate-700);font-weight:600;font-size:.94rem}
.main-nav a:hover{color:var(--indigo-600);text-decoration:none}

.search-wrap{position:relative;flex:1;max-width:340px}
.search-wrap input{width:100%;padding:9px 14px;border:1px solid var(--slate-200);border-radius:8px;font-size:.92rem;background:var(--slate-50);}
.search-wrap input:focus{outline:2px solid var(--indigo-500);outline-offset:1px;background:var(--white)}
.search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--white);border:1px solid var(--slate-200);border-radius:8px;box-shadow:var(--shadow);max-height:340px;overflow-y:auto;display:none;z-index:200;}
.search-dropdown.open{display:block}
.search-dropdown a{display:block;padding:10px 14px;color:var(--slate-800);font-size:.92rem;border-bottom:1px solid var(--slate-100)}
.search-dropdown a:last-child{border-bottom:none}
.search-dropdown a:hover{background:var(--indigo-50);text-decoration:none}
.search-dropdown .cat{color:var(--slate-400);font-size:.78rem;margin-left:6px}
.search-empty{padding:12px 14px;color:var(--slate-400);font-size:.9rem}

.hero{padding:64px 0 48px;text-align:center;background:linear-gradient(180deg,var(--indigo-50),var(--slate-50))}
.hero h1{font-size:2.3rem;margin:0 0 12px;color:var(--slate-900);letter-spacing:-.02em}
.hero p{color:var(--slate-600);max-width:620px;margin:0 auto;font-size:1.08rem}
.hero .search-wrap{max-width:520px;margin:28px auto 0}

.section-title{font-size:1.4rem;margin:48px 0 20px;color:var(--slate-900)}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-bottom:40px}
.tool-card{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius);padding:18px;display:flex;gap:12px;align-items:flex-start;transition:transform .12s,box-shadow .12s;}
.tool-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.tool-card .icon{width:38px;height:38px;flex:0 0 38px;border-radius:8px;background:var(--indigo-50);color:var(--indigo-600);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;}
.tool-card h3{margin:0 0 4px;font-size:1rem;color:var(--slate-900)}
.tool-card p{margin:0;font-size:.85rem;color:var(--slate-600)}

.tool-header{padding:36px 0 8px}
.tool-header h1{font-size:1.8rem;margin:0 0 6px;color:var(--slate-900)}
.tool-header .lead{color:var(--slate-600);font-size:1rem;max-width:720px}
.crumbs{font-size:.85rem;color:var(--slate-400);margin-bottom:6px}
.crumbs a{color:var(--slate-600)}

.tool-panel{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius);padding:24px;margin:20px 0 36px;box-shadow:var(--shadow);}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--slate-700)}
.field input[type=text],.field input[type=number],.field input[type=url],.field textarea,.field select{width:100%;padding:10px 12px;border:1px solid var(--slate-200);border-radius:8px;font-size:.94rem;font-family:inherit;background:var(--slate-50);}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--indigo-500);outline-offset:1px;background:var(--white)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>.field{flex:1;min-width:180px}
.btn{display:inline-block;background:var(--indigo-600);color:var(--white);border:none;padding:11px 22px;border-radius:8px;font-weight:700;font-size:.94rem;cursor:pointer;}
.btn:hover{background:var(--indigo-700)}
.btn.secondary{background:var(--white);color:var(--indigo-600);border:1px solid var(--indigo-500)}
.btn.small{padding:6px 12px;font-size:.82rem}
.output-box{margin-top:18px;background:var(--slate-50);border:1px dashed var(--slate-200);border-radius:8px;padding:16px;min-height:40px;}
.chip{display:inline-block;background:var(--indigo-50);color:var(--indigo-700);border-radius:20px;padding:5px 12px;margin:4px 6px 0 0;font-size:.85rem;cursor:pointer;border:1px solid transparent;}
.chip:hover{border-color:var(--indigo-500)}
.result-line{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--slate-200);font-size:.92rem}
.result-line:last-child{border-bottom:none}
.badge{background:var(--slate-100);color:var(--slate-700);border-radius:6px;padding:2px 8px;font-size:.78rem;font-weight:700}
.badge.ok{background:#dcfce7;color:#166534}
.badge.warn{background:#fef3c7;color:#92400e}
.badge.bad{background:#fee2e2;color:#991b1b}

.article{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius);padding:28px;margin-bottom:40px}
.article h2{font-size:1.25rem;color:var(--slate-900);margin-top:28px}
.article h2:first-child{margin-top:0}
.article p{color:var(--slate-700)}
.faq-item{margin-bottom:16px}
.faq-item h3{font-size:1rem;margin:0 0 4px;color:var(--slate-900)}
.faq-item p{margin:0;color:var(--slate-600)}

.related h2{font-size:1.15rem;margin-bottom:14px}

.site-footer{background:var(--slate-900);color:var(--slate-400);margin-top:60px;padding:44px 0 24px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin-bottom:28px}
.footer-grid h4{color:var(--white);font-size:.9rem;margin:0 0 12px;letter-spacing:.03em;text-transform:uppercase}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:8px}
.footer-grid a{color:var(--slate-400);font-size:.88rem}
.footer-grid a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid var(--slate-700);padding-top:18px;font-size:.82rem;text-align:center}

.page-content{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius);padding:32px;margin:28px 0 48px}
.page-content h1{margin-top:0}
.page-content h2{color:var(--slate-900);font-size:1.2rem}

.single-cat-note{text-align:center;color:var(--slate-400);font-size:.85rem;margin-top:6px;}

@media (max-width:640px){
  .header-inner{flex-wrap:wrap}
  .main-nav{width:100%;order:3;justify-content:space-between}
  .search-wrap{order:2;max-width:none;flex:1 1 100%}
  .hero h1{font-size:1.7rem}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}