.tool-hero{padding:58px 0 32px;background:radial-gradient(circle at top left,#dbeafe,transparent 36%),radial-gradient(circle at top right,#fce7f3,transparent 30%)}
.tool-hero .hero-inner{text-align:center}
.tool-hero h1{font-size:56px;line-height:1.08;margin:0 0 16px;letter-spacing:-1.6px}
.tool-hero p{max-width:820px;margin:auto;color:#475569;font-size:19px;line-height:1.75}

.tool-shell{margin:28px auto 46px}
.tool-card{background:#fff;border:1px solid #e5e7eb;border-radius:30px;box-shadow:0 28px 80px rgba(15,23,42,.08);overflow:hidden}
.tool-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid #eef2f7;background:#fbfdff}
.tool-tabs{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid #dbe3ef;background:#fff;color:#334155;border-radius:999px;padding:9px 14px;font-size:14px;font-weight:800}
.pill.active{background:#2563eb;color:#fff;border-color:#2563eb}

.tool-main{display:grid;grid-template-columns:1fr 1fr}
.editor{padding:22px}
.editor:first-child{border-right:1px solid #eef2f7}
.editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.editor-head h2{margin:0;font-size:20px}
.count{font-size:13px;color:#94a3b8}

textarea{width:100%;min-height:410px;border:1px solid #d7dee9;border-radius:18px;padding:16px;font-family:inherit;font-size:15px;line-height:1.75;outline:none;resize:vertical;color:#111827;background:#fff}
textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px}
select,input{width:100%;height:46px;border:1px solid #d7dee9;border-radius:14px;padding:0 12px;background:#fff;color:#111827;font-family:inherit;outline:none}
select:focus,input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}

.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
button{border:0;border-radius:14px;padding:13px 20px;font-family:inherit;font-weight:900;cursor:pointer}
.primary{background:#2563eb;color:#fff}
.primary:disabled{background:#93c5fd;cursor:not-allowed}
.secondary{background:#eef2f7;color:#334155}
.status{min-height:22px;margin-top:12px;color:#64748b;font-size:14px}

.examples{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0}
.example{background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:22px;box-shadow:0 14px 36px rgba(15,23,42,.04)}
.example h3{margin:0 0 12px;font-size:20px}
.before,.after{padding:16px;border-radius:16px;line-height:1.7;font-size:15px}
.before{background:#f1f5f9;color:#475569;margin-bottom:12px}
.after{background:#eff6ff;color:#1e3a8a}

.content{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin:34px 0 54px}
.article,.sidebox{background:#fff;border:1px solid #e5e7eb;border-radius:26px;padding:26px;box-shadow:0 14px 36px rgba(15,23,42,.04)}
.article h2{font-size:28px;margin:0 0 14px}
.article h3{font-size:22px;margin:28px 0 10px}
.article p{color:#475569;line-height:1.85;font-size:16px}
.article ul{color:#475569;line-height:1.85}
.faq-item{border-top:1px solid #e5e7eb;padding:16px 0}
.faq-item b{display:block;margin-bottom:8px}
.faq-item p{margin:0;color:#475569;line-height:1.75}
.sidebox h3{margin:0 0 14px;font-size:22px}
.side-link{display:block;padding:13px 0;border-bottom:1px solid #e5e7eb;color:#2563eb;font-weight:800}
.side-note{background:#eff6ff;color:#1e3a8a;border-radius:18px;padding:18px;margin-top:18px;line-height:1.7}

body.dark .tool-card,
body.dark .example,
body.dark .article,
body.dark .sidebox{background:#111827;border-color:#1f2937}
body.dark .tool-top{background:#0f172a;border-color:#1f2937}
body.dark textarea,
body.dark select,
body.dark input{background:#0f172a;color:#e5e7eb;border-color:#334155}
body.dark .pill,
body.dark .secondary{background:#0f172a;color:#cbd5e1;border-color:#334155}
body.dark .before{background:#0f172a;color:#cbd5e1}
body.dark .after,
body.dark .side-note{background:#172554;color:#bfdbfe}
body.dark .article p,
body.dark .article ul,
body.dark .faq-item p{color:#cbd5e1}

@media(max-width:900px){
  .tool-hero{padding:46px 0 24px}
  .tool-hero h1{font-size:38px}
  .tool-hero p{font-size:16px}
  .tool-main,.examples,.content{grid-template-columns:1fr}
  .editor:first-child{border-right:0;border-bottom:1px solid #eef2f7}
  .options{grid-template-columns:1fr}
  .tool-top{display:block}
  .tool67-plan-info{margin-top:12px}
}

@media(max-width:520px){
  .tool-card{border-radius:22px}
  .editor{padding:16px}
  textarea{min-height:300px}
  .article,.sidebox,.example{padding:18px;border-radius:20px}
}