/* Wordlyo — shared stylesheet (mobile-first, light theme) */
:root{
  --accent:#1d4ed8;
  --accent-dark:#1e40af;
  --accent-light:#dbeafe;
  --accent-soft:#eff6ff;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-alt:#f8fafc;
  --border:#e5e7eb;
  --radius:12px;
  --shadow:0 2px 10px rgba(15,23,42,.07);
  --max:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
}
img,svg{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 1rem}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.5rem 1rem;z-index:100}
.skip-link:focus{left:0}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;max-width:var(--max);margin:0 auto}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.35rem;color:var(--text)}
.brand:hover{text-decoration:none}
.brand svg{width:32px;height:32px}
.nav-toggle{display:none}
.nav-toggle-label{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem}
.nav-toggle-label span{display:block;width:26px;height:3px;background:var(--text);border-radius:2px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem;align-items:center}
.site-nav a{display:block;padding:.6rem .8rem;color:var(--text);font-weight:600;border-radius:8px}
.site-nav a:hover{background:var(--accent-soft);text-decoration:none;color:var(--accent-dark)}
.has-dropdown{position:relative}
.dropdown{display:none;position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:.4rem;z-index:60}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{display:block}
.dropdown a{font-weight:500;padding:.55rem .8rem}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,var(--accent-soft),#fff);padding:3.2rem 0 2.6rem;text-align:center}
.hero h1{font-size:2.1rem;margin:0 0 .6rem;line-height:1.2}
.hero p.lead{font-size:1.12rem;color:var(--muted);max-width:640px;margin:0 auto 1.4rem}
.hero-badges{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.badge-pill{background:#fff;border:1px solid var(--border);border-radius:999px;padding:.3rem .9rem;font-size:.85rem;color:var(--muted);font-weight:600}

/* ---------- Buttons / forms ---------- */
.btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:10px;padding:.7rem 1.4rem;font-size:1rem;font-weight:700;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--accent-dark);text-decoration:none;color:#fff}
.btn-secondary{background:#fff;color:var(--accent);border:2px solid var(--accent)}
.btn-secondary:hover{background:var(--accent-soft);color:var(--accent-dark)}
.btn-sm{padding:.45rem .9rem;font-size:.9rem}
label{font-weight:600}
input[type=text],input[type=email],input[type=number],select,textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--border);border-radius:10px;font-size:1rem;font-family:inherit;background:#fff;color:var(--text)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-light);border-color:var(--accent)}
textarea{min-height:160px;resize:vertical}
.field{margin-bottom:1rem}
.field-row{display:flex;gap:1rem;flex-wrap:wrap}
.field-row .field{flex:1 1 180px}
.check-row{display:flex;align-items:center;gap:.5rem;margin:.4rem 0}
.check-row input{width:auto}
input[type=range]{width:100%;accent-color:var(--accent)}

/* ---------- Sections / cards ---------- */
.section{padding:2.6rem 0}
.section-alt{background:var(--bg-alt)}
.section h2{font-size:1.7rem;margin:0 0 .4rem}
.section .sub{color:var(--muted);margin:0 0 1.6rem;max-width:680px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.tool-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.5rem;transition:transform .12s}
.tool-card:hover{transform:translateY(-3px)}
.tool-card h3{margin:0;font-size:1.08rem}
.tool-card h3 a{color:var(--text)}
.tool-card p{margin:0;color:var(--muted);font-size:.93rem;flex:1}
.tool-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-light);display:flex;align-items:center;justify-content:center}
.tool-icon svg{width:24px;height:24px;stroke:var(--accent-dark)}
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.feature{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem}
.feature h3{margin:.4rem 0;font-size:1.05rem}
.feature p{margin:0;color:var(--muted);font-size:.94rem}

/* ---------- Tool box ---------- */
.tool-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem;margin:1.4rem 0}
.tool-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem;margin-top:1rem}
.stat{background:var(--accent-soft);border-radius:10px;padding:.7rem .8rem;text-align:center}
.stat .num{font-size:1.35rem;font-weight:800;color:var(--accent-dark)}
.stat .lbl{font-size:.8rem;color:var(--muted);font-weight:600}
.output-box{background:var(--bg-alt);border:1px dashed var(--border);border-radius:10px;padding:1rem;min-height:80px;white-space:pre-wrap;word-break:break-word}
.result-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.chip{background:var(--accent-soft);border:1px solid var(--accent-light);color:var(--accent-dark);border-radius:999px;padding:.25rem .8rem;font-weight:600;font-size:.9rem}

/* ---------- Ad placeholders ---------- */
.ad-slot{border:2px dashed #c7d2fe;background:#f5f7ff;border-radius:var(--radius);padding:1.4rem 1rem;text-align:center;color:#93a4c4;font-size:.85rem;font-weight:600;letter-spacing:.04em;margin:1.8rem 0}

/* ---------- Guide article typography ---------- */
.guide{max-width:780px}
.guide h2{font-size:1.45rem;margin:2rem 0 .6rem;padding-top:.4rem}
.guide h3{font-size:1.15rem;margin:1.4rem 0 .4rem}
.guide p{margin:.7rem 0}
.guide ul,.guide ol{margin:.7rem 0;padding-left:1.4rem}
.guide li{margin:.35rem 0}
.guide table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem}
.guide th,.guide td{border:1px solid var(--border);padding:.55rem .7rem;text-align:left}
.guide th{background:var(--accent-soft)}
.guide blockquote{border-left:4px solid var(--accent);background:var(--accent-soft);margin:1rem 0;padding:.7rem 1rem;border-radius:0 10px 10px 0}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--border);border-radius:10px;margin-bottom:.6rem;background:#fff}
.faq summary{cursor:pointer;font-weight:700;padding:.85rem 1rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 1rem 1rem;color:var(--muted)}

/* ---------- Blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.blog-card-body{padding:1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.blog-card h3{margin:0;font-size:1.08rem;line-height:1.35}
.blog-card h3 a{color:var(--text)}
.blog-card p{margin:0;color:var(--muted);font-size:.92rem;flex:1}
.blog-meta{font-size:.82rem;color:var(--muted)}
.article-head{max-width:780px;margin:0 auto}
.article-head h1{font-size:1.9rem;line-height:1.25}
.article-body{max-width:780px}
.toc{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem;margin:1.4rem 0}
.toc h2{font-size:1.05rem;margin:0 0 .4rem}
.toc ul{margin:0;padding-left:1.2rem}
.author-box{display:flex;gap:.8rem;align-items:center;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin:2rem 0}
.author-box .avatar{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;flex:none}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.88rem;color:var(--muted);margin:1.2rem 0 .4rem}
.breadcrumb a{color:var(--muted)}

/* ---------- Coin flip ---------- */
.coin-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem 0}
.coin{width:130px;height:130px;border-radius:50%;position:relative;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.3,.7,.4,1)}
.coin-face{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:4px solid #d4a017}
.coin-heads{background:radial-gradient(circle at 35% 35%,#fde68a,#f59e0b);color:#92400e}
.coin-tails{background:radial-gradient(circle at 35% 35%,#e5e7eb,#9ca3af);color:#374151;transform:rotateY(180deg)}
.coin.flipping{transform:rotateY(1800deg)}

/* ---------- Dice ---------- */
.dice-row{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin:1rem 0;min-height:76px;align-items:center}
.die{width:64px;height:64px;border-radius:14px;background:#fff;border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;color:var(--accent-dark);box-shadow:var(--shadow)}
.die.rolling{animation:shake .12s infinite}
@keyframes shake{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}
.dice-total{font-size:1.5rem;font-weight:800;text-align:center;color:var(--accent-dark)}

/* ---------- Strength meter ---------- */
.meter{height:10px;background:var(--border);border-radius:999px;overflow:hidden;margin-top:.4rem}
.meter-fill{height:100%;width:0;border-radius:999px;transition:width .3s,background .3s}
.strength-label{font-weight:700;margin-top:.3rem}

/* ---------- Footer ---------- */
.site-footer{background:#0f172a;color:#cbd5e1;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.6rem;padding:2.2rem 1rem 1rem;max-width:var(--max);margin:0 auto}
.site-footer h4{color:#fff;margin:0 0 .6rem;font-size:1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.3rem 0}
.site-footer a{color:#cbd5e1;font-size:.93rem}
.site-footer a:hover{color:#fff}
.footer-brand{color:#fff;font-weight:800;font-size:1.25rem;display:flex;align-items:center;gap:.5rem}
.footer-brand svg{width:28px;height:28px}
.footer-bottom{border-top:1px solid #1e293b;text-align:center;padding:1rem;font-size:.88rem;color:#94a3b8;max-width:var(--max);margin:0 auto}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:4rem 0}
.notfound h1{font-size:3rem;margin:0}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .nav-toggle-label{display:flex}
  .site-nav{display:none;width:100%;order:3}
  .header-inner{flex-wrap:wrap}
  .nav-toggle:checked ~ .site-nav{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;padding:.5rem 0}
  .site-nav a{padding:.7rem .4rem}
  .dropdown{display:block;position:static;box-shadow:none;border:none;padding:0 0 0 1rem}
  .has-dropdown > a{font-weight:800;color:var(--accent-dark)}
  .hero h1{font-size:1.65rem}
  .tool-box{padding:1rem}
}
@media (min-width:761px){
  .container{padding:0 1.5rem}
}