@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
:root{--bg:#0B0D0F;--bg2:#0f1216;--card:#0d1115;--border:#1f2a36;--text:#e5e7eb;--muted:#9aa0a6;--brand1:#06B6D4;--brand2:#22D3EE;--accent:#06B6D4}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 10% -10%,rgba(6,182,212,.12),transparent),radial-gradient(800px 400px at 100% 0,rgba(34,211,238,.08),transparent),var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;line-height:1.6}
.no-scroll{overflow:hidden}
body{overflow-x:hidden;-webkit-text-size-adjust:100%}
.container{width:min(1100px,92%);margin:0 auto;padding:18px 0}
.tool-topnav{position:fixed;top:16px;left:16px;z-index:50}
.tool-topnav .home{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--border);color:var(--text);text-decoration:none}
.hero{padding-top:78px;padding-bottom:16px}
.hero h1{font-size:38px;line-height:1.2;margin:0;font-weight:800}
.hero .lead{margin-top:8px;color:var(--muted);font-size:16px}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:14px;padding:16px}
.panel+.panel{margin-top:14px}
.tool-ui{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.control{display:flex;flex-direction:column;gap:10px}
.input,textarea,select{background:#0f1319;border:1px solid var(--border);color:var(--text);border-radius:12px;padding:12px 12px;font-size:16px;outline:none;width:100%;max-width:100%;min-height:44px}
textarea{min-height:240px;resize:vertical}
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--brand1),var(--brand2));border:none;color:#fff;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;touch-action:manipulation}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn.secondary{background:#141821;border:1px solid var(--border);color:var(--text)}
.out-box{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.005));border:1px solid var(--border);border-radius:12px;padding:12px;min-height:260px;overflow:auto;word-break:break-word;line-height:1.6;font-size:15px}
/* Larger fields for AI News Editor (Create News) */
#outHead.input, #outDesc.input{ min-height:64px; line-height:1.5; }
.grid{display:grid;gap:12px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.step{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px}
.step .n{width:28px;height:28px;border-radius:999px;background:#101621;border:1px solid var(--border);display:inline-grid;place-items:center;margin-right:8px}
.section-title{font-size:22px;font-weight:800;margin:10px 0}
.other-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.tool-card{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
.tool-card i{color:var(--accent)}
.faq{display:grid;gap:8px}
.faq-item{border:1px solid var(--border);border-radius:12px;background:var(--card)}
.faq-q{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--text);padding:12px 14px;font-weight:700;cursor:pointer}
.faq-a{display:none;padding:0 14px 14px 14px;color:var(--muted)}
.faq-a.open{display:block}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.small{font-size:12px;color:var(--muted)}
.copy{position:relative}
.copy .copied{position:absolute;right:8px;top:8px;color:#22c55e;display:none}
.audio{width:100%;margin-top:10px}
/* Fix native clear (X) and spinners overlapping inputs on mobile */
input::-ms-clear,input::-ms-reveal{display:none;width:0;height:0}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;height:0;width:0}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

img,video,canvas,iframe{max-width:100%;height:auto}

/* Reusable ring score + preview (for Create News SEO and others) */
.score-card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; text-align:center; }
.score-head{ font-weight:800; margin-bottom:8px; }
.ring{ --p:0%; --col:#3b82f6; width:120px; height:120px; border-radius:50%; background: conic-gradient(var(--col) var(--p), #2b3036 0); display:grid; place-items:center; color:#e5e7eb; margin:8px auto; position:relative; }
.ring::after{ content:""; width:88px; height:88px; background:#0f1216; border-radius:50%; position:absolute; }
.ring > b, .ring > small{ position:relative; z-index:1; display:block; }
.ring > b{ font-size:26px; line-height:1; }
.ring > small{ color:#9aa0a6; margin-top:4px; }
.g-preview{ background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.005)); border:1px solid var(--border); border-radius:12px; padding:12px; }
.g-preview .t{ color:#8ab4f8; font-size:18px; line-height:1.3; margin-bottom:2px; }
.g-preview .u{ color:#9aa0a6; font-size:12px; margin-bottom:6px; }
.g-preview .d{ color:#cbd5e1; font-size:14px; line-height:1.5; }

@media(max-width:900px){
  .tool-ui{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr}
  .hero{padding-top:64px}
  .hero h1{font-size:28px}
  .hero .lead{font-size:14px}
  .panel{padding:14px}
}

@media(max-width:600px){
  .container{width:94%}
  .btn{padding:12px 14px}
  textarea{min-height:220px}
}