*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f7fb;color:#1f2937;line-height:1.6}.topbar{background:#0f172a;color:#fff;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.brand{font-weight:700;font-size:20px}.topbar a{color:#fff;text-decoration:none;margin-left:14px;font-size:14px}.hero{background:linear-gradient(135deg,#2563eb,#0f172a);color:#fff;padding:55px 24px;text-align:center}.hero h1{font-size:38px;margin:0 0 12px}.hero p{max-width:760px;margin:0 auto;font-size:18px}.container{max-width:1150px;margin:auto;padding:24px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}.card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 8px 25px rgba(15,23,42,.08);border:1px solid #e5e7eb}.card h3{margin-top:0}.btn{display:inline-block;background:#2563eb;color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;border:0;cursor:pointer}.btn.secondary{background:#475569}.ad-box{background:#fff;border:2px dashed #94a3b8;border-radius:14px;padding:22px;text-align:center;color:#64748b;margin:24px 0}.tool-box{background:#fff;border-radius:16px;padding:24px;box-shadow:0 8px 25px rgba(15,23,42,.08)}input,textarea,select{width:100%;padding:11px;border:1px solid #cbd5e1;border-radius:10px;margin:6px 0 14px;font-size:15px}textarea{min-height:160px}label{font-weight:700}.result{background:#f8fafc;border-left:5px solid #2563eb;padding:14px;border-radius:10px;margin-top:14px;white-space:pre-wrap}.footer{text-align:center;padding:28px;background:#0f172a;color:#cbd5e1;margin-top:30px}.search{max-width:520px;margin:0 auto 22px}.badge{display:inline-block;background:#e0f2fe;color:#075985;border-radius:999px;padding:4px 10px;font-size:12px;margin-bottom:8px}@media(max-width:650px){.hero h1{font-size:28px}.topbar{display:block}.topbar a{display:inline-block;margin:8px 10px 0 0}}
.tool-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}.muted{color:#64748b;margin-top:-8px}.screen-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.screen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0}.metric-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:16px}.metric-card span{display:block;color:#64748b;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.metric-card strong{display:block;font-size:24px;color:#0f172a;margin:8px 0 4px}.metric-card small{color:#64748b}.pattern-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:12px 0 24px}.pattern{height:135px;border-radius:16px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}.gradient{background:linear-gradient(90deg,#000,#fff)}.checker{background-color:#fff;background-image:linear-gradient(45deg,#d1d5db 25%,transparent 25%),linear-gradient(-45deg,#d1d5db 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d1d5db 75%),linear-gradient(-45deg,transparent 75%,#d1d5db 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;color:#111827}.lines{background:repeating-linear-gradient(90deg,#111827 0,#111827 2px,#fff 2px,#fff 8px);color:#2563eb;text-shadow:0 1px 2px #fff}.colors{display:grid;grid-template-columns:repeat(6,1fr);padding:0}.colors span:nth-child(1){background:red}.colors span:nth-child(2){background:orange}.colors span:nth-child(3){background:yellow}.colors span:nth-child(4){background:green}.colors span:nth-child(5){background:blue}.colors span:nth-child(6){background:purple}.screen-pro .result{max-height:420px;overflow:auto;font-family:Consolas,monospace;font-size:13px}

/* Extra tool layout helpers */
.wide-card{max-width:1100px;margin:0 auto;}
.result-box{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;min-height:120px;}
.tool-actions{display:flex;gap:10px;align-items:center;margin:14px 0;}
.wrap-actions{flex-wrap:wrap;}
.btn.danger{background:#dc2626;color:#fff;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:16px 0;}
.stats-grid div{background:#f8fafc;border:1px solid #dbe4ef;border-radius:12px;padding:14px;}
.stats-grid strong{display:block;font-size:24px;color:#1d4ed8;}
.stats-grid span{color:#475569;font-size:13px;}
.info-box{background:#f8fafc;border-left:4px solid #2563eb;border-radius:10px;padding:14px;margin-top:16px;}