:root{--blue:#2563eb;--blue-light:#eff6ff;--gray:#64748b;--border:#e2e8f0;--radius:8px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#fff;color:#1e293b;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--blue);text-decoration:none}
.nav{border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.nav .brand{font-size:1.25rem;font-weight:700;color:#1e293b}
.nav .brand span{color:var(--blue)}
.nav-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.nav-links a{font-size:.9rem;color:var(--gray);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.lang-btn{background:var(--blue-light);border:1px solid var(--border);border-radius:4px;padding:2px 8px;cursor:pointer;font-size:.8rem;color:var(--blue);font-weight:600}
.container{max-width:900px;width:100%;margin:0 auto;padding:24px;flex:1}
h1{font-size:1.5rem;margin-bottom:4px}
.subtitle{color:var(--gray);margin-bottom:24px;font-size:.95rem}
textarea,.input-box{width:100%;min-height:200px;border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-family:'SF Mono',SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:.9rem;resize:vertical;outline:none;transition:border .2s}
textarea:focus,.input-box:focus{border-color:var(--blue)}
.output-box{background:#f8fafc;border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-family:'SF Mono',SFMono-Regular,Consolas,monospace;font-size:.9rem;min-height:100px;white-space:pre-wrap;word-break:break-all;position:relative}
.btn{background:var(--blue);color:#fff;border:none;border-radius:var(--radius);padding:8px 20px;cursor:pointer;font-size:.9rem;transition:opacity .2s}
.btn:hover{opacity:.85}
.btn-outline{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.btn-outline:hover{background:var(--blue-light)}
.btn-sm{padding:4px 12px;font-size:.8rem}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
.stat-card{background:var(--blue-light);border-radius:var(--radius);padding:16px;text-align:center}
.stat-card .num{font-size:1.8rem;font-weight:700;color:var(--blue)}
.stat-card .label{font-size:.8rem;color:var(--gray);margin-top:4px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:24px}
.tool-card{border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:box-shadow .2s,border-color .2s}
.tool-card:hover{border-color:var(--blue);box-shadow:0 4px 12px rgba(37,99,235,.1)}
.tool-card .icon{font-size:2rem;margin-bottom:8px}
.tool-card h3{font-size:1rem;margin-bottom:4px}
.tool-card p{font-size:.85rem;color:var(--gray)}
.copy-btn{position:absolute;top:8px;right:8px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.split{grid-template-columns:1fr}.nav{padding:10px 16px}.container{padding:16px}}
footer{border-top:1px solid var(--border);padding:16px 24px;text-align:center;font-size:.8rem;color:var(--gray)}
footer a{color:var(--blue)}
.toast{position:fixed;bottom:24px;right:24px;background:#1e293b;color:#fff;padding:10px 20px;border-radius:var(--radius);font-size:.85rem;opacity:0;transition:opacity .3s;pointer-events:none;z-index:999}
.toast.show{opacity:1}
select{border:1px solid var(--border);border-radius:4px;padding:4px 8px;font-size:.85rem;outline:none}