:root{--bg:#1a1a2e;--surface:#16213e;--surface2:#0f3460;--accent:#e94560;--text:#eee;--text2:#aaa;--mono:'JetBrains Mono','Fira Code','Courier New',monospace;--border:#2a2a4a;--success:#00d672;--radius:8px}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--mono);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:20px;width:100%;flex:1}
header{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.logo{font-size:1.4em;font-weight:700;color:var(--text)}.logo span{color:var(--accent)}
nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
nav a{color:var(--text2);font-size:.85em;padding:4px 8px;border-radius:4px;transition:.2s}nav a:hover,nav a.active{color:var(--accent);background:var(--surface2);text-decoration:none}
.lang-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:4px 10px;border-radius:4px;cursor:pointer;font-family:var(--mono);font-size:.8em}
textarea,input[type=text],input[type=number],select{background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:.95em;padding:12px;border-radius:var(--radius);width:100%;resize:vertical}
textarea:focus,input:focus{outline:none;border-color:var(--accent)}
textarea{min-height:200px}
.btn{background:var(--accent);color:#fff;border:none;padding:10px 20px;border-radius:var(--radius);cursor:pointer;font-family:var(--mono);font-size:.9em;transition:.2s}.btn:hover{opacity:.85}
.btn-secondary{background:var(--surface2);border:1px solid var(--border)}
.btn-copy{background:var(--success);font-size:.8em;padding:6px 14px}
.toolbar{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap;align-items:center}
.output{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;min-height:200px;white-space:pre-wrap;word-break:break-all;overflow:auto;font-size:.9em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:768px){.split{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:.2s}.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:20px}
.card h3{margin-bottom:8px;color:var(--accent)}.card p{color:var(--text2);font-size:.85em}
footer{text-align:center;padding:20px;color:var(--text2);font-size:.8em;border-top:1px solid var(--border);margin-top:auto}
.donate{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;margin:30px 0;font-size:.85em}
.donate code{background:var(--surface2);padding:4px 8px;border-radius:4px;font-size:.75em;word-break:break-all}
.toast{position:fixed;bottom:20px;right:20px;background:var(--success);color:#000;padding:10px 20px;border-radius:var(--radius);font-size:.85em;opacity:0;transition:.3s;pointer-events:none;z-index:999}
.toast.show{opacity:1}
h1{font-size:1.5em;margin-bottom:16px}h2{font-size:1.1em;margin:12px 0 8px;color:var(--accent)}
label{font-size:.85em;color:var(--text2);display:block;margin-bottom:4px}
.highlight{background:#e9456033;padding:1px 2px;border-radius:2px}
.diff-add{background:#00d67233;color:#00d672}.diff-del{background:#e9456033;color:#e94560}
.tab-bar{display:flex;gap:0;margin-bottom:12px}.tab-bar button{background:var(--surface);border:1px solid var(--border);color:var(--text2);padding:8px 16px;cursor:pointer;font-family:var(--mono);font-size:.85em;border-bottom:2px solid transparent;transition:.2s}.tab-bar button.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--surface2)}