body{margin:0;font-family:Segoe UI,Arial;background:#f5f7fb;color:#111}.layout{display:flex;height:100vh}.sidebar{width:280px;background:#fff;border-right:1px solid #e5e7eb;padding:15px;display:flex;flex-direction:column}.sidebar h2{margin-bottom:10px}.sidebar input{padding:8px;margin-bottom:10px;border:1px solid #ddd;border-radius:6px}.sidebar a{padding:8px;margin:3px 0;text-decoration:none;color:#333;border-radius:6px;display:flex;justify-content:space-between}.sidebar a:hover{background:#f3f4f6}.sidebar a.active{background:#e0e7ff;color:#1d4ed8}.content{flex:1;padding:20px;background:#f9fafb}.tool-page{padding:20px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;width:100%}@media(max-width:768px){.tool-grid{grid-template-columns:1fr}}textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 2px #2563eb33}.panel{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:12px;overflow:hidden}textarea{width:100%;max-width:100%;height:300px;padding:10px;border:1px solid #ddd;border-radius:6px;resize:vertical}pre{background:#f8fafc;height:300px;overflow:auto;padding:10px;border-radius:6px}.actions{margin-top:10px;display:flex;gap:10px}*{box-sizing:border-box}button{border:none;border-radius:8px;padding:8px 14px;font-size:14px;cursor:pointer;transition:all .2s ease}.btn-primary{background:#2563eb;color:#fff}.btn-primary:hover{background:#1d4ed8}.btn-secondary{background:#e5e7eb;color:#374151}.btn-secondary:hover{background:#d1d5db}.btn-success{background:#22c55e;color:#fff}.btn-success:hover{background:#16a34a}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626}.actions{display:flex;gap:10px;margin-top:10px}button{box-shadow:0 1px 2px #0000001a}button:hover{transform:translateY(-1px)}input{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;margin-bottom:10px}.color-preview{width:100%;height:80px;border-radius:8px;margin:10px 0;border:1px solid #ddd}.color-values div{display:flex;justify-content:space-between;margin:5px 0}