*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{--primary:#007BFF;--bg-dark:#1e1e1e;--bg-darker:#151515;--bg-card:#2d2d2d;--text-primary:#e4e4e4;--text-secondary:#a0a0a0;--border:#3a3a3a;--success:#28a745;--error:#dc3545;--warning:#ffc107;--code-bg:#0d0d0d;--shadow:0 4px 6px rgba(0,0,0,0.3);--radius:6px;--transition:all 0.3s ease}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg-dark);color:var(--text-primary);line-height:1.6;font-size:16px;min-height:100vh;display:flex;flex-direction:column}a{color:var(--primary);text-decoration:none;transition:var(--transition)}a:hover{color:#0056b3;text-decoration:underline}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}header{background:var(--bg-darker);border-bottom:2px solid var(--primary);padding:1rem 0;position:sticky;top:0;z-index:1000;box-shadow:var(--shadow)}.header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.logo{font-size:1.5rem;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:0.5rem}.logo-icon{font-size:2rem}nav ul{display:flex;list-style:none;gap:1.5rem;flex-wrap:wrap}nav a{color:var(--text-secondary);font-weight:500;padding:0.5rem 0;border-bottom:2px solid transparent;text-decoration:none}nav a:hover,nav a.active{color:var(--primary);border-bottom-color:var(--primary);text-decoration:none}main{flex:1;padding:2rem 0}.hero{text-align:center;padding:2rem 0;margin-bottom:2rem}.hero h1{font-size:2.5rem;margin-bottom:1rem;color:var(--primary);line-height:1.2}.hero p{font-size:1.2rem;color:var(--text-secondary);max-width:800px;margin:0 auto}.tool-container{background:var(--bg-card);border-radius:var(--radius);padding:2rem;margin:2rem 0;box-shadow:var(--shadow);border:1px solid var(--border)}.tool-header{margin-bottom:1.5rem}.tool-header h2{color:var(--primary);margin-bottom:0.5rem;font-size:1.8rem}.status-bar{padding:0.75rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-weight:600;display:flex;align-items:center;gap:0.5rem}.status-valid{background:rgba(40,167,69,0.2);color:var(--success);border:1px solid var(--success)}.status-error{background:rgba(220,53,69,0.2);color:var(--error);border:1px solid var(--error)}.status-idle{background:rgba(0,123,255,0.2);color:var(--primary);border:1px solid var(--primary)}.tool-controls{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.btn{padding:0.75rem 1.5rem;border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:0.5rem;text-decoration:none}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:#0056b3;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,123,255,0.3);text-decoration:none}.btn-secondary{background:var(--bg-darker);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border);text-decoration:none}.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#218838;text-decoration:none}.textarea-wrapper{position:relative;margin-bottom:1.5rem}textarea{width:100%;min-height:300px;padding:1rem;background:var(--code-bg);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);font-family:"Courier New",Courier,monospace;font-size:14px;line-height:1.5;resize:vertical;transition:var(--transition)}textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,123,255,0.1)}textarea::placeholder{color:var(--text-secondary)}.copy-btn{position:absolute;top:10px;right:10px;padding:0.5rem 1rem;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-size:0.9rem;opacity:0.9;transition:var(--transition)}.copy-btn:hover{opacity:1;transform:scale(1.05)}.copy-btn.copied{background:var(--success)}.content-section{margin:3rem 0}.content-section h2{color:var(--primary);font-size:2rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--border)}.content-section h3{color:var(--text-primary);font-size:1.5rem;margin:2rem 0 1rem}.content-section p{margin-bottom:1rem;line-height:1.8;color:var(--text-secondary)}.content-section ul,.content-section ol{margin:1rem 0 1rem 2rem;color:var(--text-secondary)}.content-section li{margin-bottom:0.5rem;line-height:1.8}code{background:var(--code-bg);padding:0.2rem 0.4rem;border-radius:3px;font-family:"Courier New",Courier,monospace;color:var(--primary);font-size:0.9em}pre{background:var(--code-bg);padding:1rem;border-radius:var(--radius);overflow-x:auto;margin:1rem 0;border:1px solid var(--border)}pre code{background:none;padding:0}.faq-section{margin:3rem 0}.faq-item{background:var(--bg-darker);padding:1.5rem;margin-bottom:1rem;border-radius:var(--radius);border-left:4px solid var(--primary)}.faq-item h3{color:var(--primary);margin-bottom:0.75rem;font-size:1.2rem}.faq-item p{color:var(--text-secondary);line-height:1.8}.privacy-notice{background:rgba(0,123,255,0.1);border:1px solid var(--primary);border-radius:var(--radius);padding:1.5rem;margin:2rem 0;text-align:center}.privacy-notice h3{color:var(--primary);margin-bottom:0.5rem}.privacy-notice p{color:var(--text-primary);margin:0}footer{background:var(--bg-darker);border-top:2px solid var(--primary);padding:2rem 0;margin-top:auto}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}.footer-section h3{color:var(--primary);margin-bottom:1rem}.footer-section ul{list-style:none}.footer-section li{margin-bottom:0.5rem}.footer-bottom{text-align:center;padding-top:1rem;border-top:1px solid var(--border);color:var(--text-secondary)}.json-viewer{font-family:"Courier New",Courier,monospace;font-size:14px}.json-key{color:#9cdcfe}.json-string{color:#ce9178}.json-number{color:#b5cea8}.json-boolean{color:#569cd6}.json-null{color:#569cd6}.tree-node{margin-left:20px}.tree-toggle{cursor:pointer;user-select:none;color:var(--primary);margin-right:5px;display:inline-block;width:15px}.error-line{color:var(--error);font-weight:700}@media(max-width:768px){.header-content{flex-direction:column;align-items:flex-start}nav ul{gap:1rem;font-size:0.9rem}.hero h1{font-size:2rem}.hero p{font-size:1rem}.tool-controls{flex-direction:column}.btn{width:100%;justify-content:center}textarea{min-height:250px;font-size:13px}.content-section h2{font-size:1.6rem}.content-section h3{font-size:1.3rem}.footer-content{grid-template-columns:1fr}}@media(max-width:480px){.logo{font-size:1.2rem}.hero h1{font-size:1.6rem}.tool-container{padding:1rem}textarea{min-height:200px}}