*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0f172a;color:#e2e8f0;line-height:1.6}.container{max-width:1400px;margin:0 auto;padding:0 20px}header{background:#1e293b;padding:20px 0;border-bottom:1px solid #334155;box-shadow:0 2px 8px rgba(0,0,0,.3)}header .container{display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:15px}.logo img{width:50px;height:50px;border-radius:10px}.logo h1{font-size:28px;color:#60a5fa}.lang-switch select{padding:6px 12px;background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:4px;cursor:pointer;font-size:13px;transition:all .2s}.lang-switch select:hover{border-color:#60a5fa}.lang-switch select:focus{outline:0;border-color:#60a5fa}.main{display:grid;grid-template-columns:250px 1fr;gap:30px;padding:30px 20px}.sidebar{background:#1e293b;padding:20px;border-radius:12px;height:fit-content;box-shadow:0 4px 12px rgba(0,0,0,.2)}.nav-item{display:block;width:100%;padding:12px 16px;margin-bottom:8px;background:0 0;border:none;color:#94a3b8;text-align:left;cursor:pointer;border-radius:8px;font-size:15px;transition:all .2s}.nav-item:hover{background:#334155;color:#e2e8f0;transform:translateX(2px)}.nav-item.active{background:#3b82f6;color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.3)}.nav-item:active{transform:scale(.98)}.content{background:#1e293b;padding:30px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.2)}.tool-panel{display:none}.tool-panel.active{display:block}.tool-panel h2{margin-bottom:24px;color:#60a5fa;font-size:24px;font-weight:600}.card{background:#0f172a;padding:24px;border-radius:8px;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,.15)}input,textarea{width:100%;padding:12px;background:#1e293b;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:14px;margin:10px 0;transition:all .2s}input:focus,textarea:focus{outline:0;border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.1)}textarea{min-height:150px;font-family:'Courier New',monospace;resize:vertical}button{padding:10px 20px;background:#3b82f6;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s;box-shadow:0 2px 6px rgba(59,130,246,.3)}button:hover{background:#2563eb;box-shadow:0 4px 12px rgba(59,130,246,.4);transform:translateY(-1px)}button:active{transform:translateY(0);box-shadow:0 1px 3px rgba(59,130,246,.3)}.btn-group{display:flex;gap:10px;flex-wrap:wrap}#datetime-result,#encode-result,#json-result,#ts-result{margin-top:15px;padding:15px;background:#1e293b;border-radius:6px;white-space:pre-wrap;word-break:break-all;font-family:'Courier New',monospace;font-size:13px;min-height:50px}.copy-btn{position:absolute;top:23px;right:8px;padding:4px 8px;background:#334155;font-size:16px;min-width:auto;opacity:.7}.copy-btn:hover{background:#3b82f6;opacity:1}#json-result:empty+.copy-btn{display:none}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:#3b82f6;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;opacity:0;transition:all .3s ease;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,.3)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.delete-btn{min-width:16px;width:16px;height:16px;padding:3px;background:#ef4444;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.delete-btn:hover{background:#dc2626;transform:scale(1.05)}.delete-btn svg{color:#fff}#api-response{background:#1e293b;border-radius:6px;padding:15px;white-space:pre-wrap;word-break:break-all;font-family:'Courier New',monospace;font-size:13px}.cron-error{border-color:#ef4444!important;background-color:#fee2e2!important}#qr-canvas{display:block;margin:20px auto;background:#fff;padding:10px;border-radius:8px}@media (max-width:768px){.main{grid-template-columns:1fr}.sidebar{display:flex;overflow-x:auto;padding:10px}.nav-item{white-space:nowrap}}.pb-tab{padding:10px 20px;background:0 0;border:none;color:#94a3b8;cursor:pointer;border-bottom:3px solid transparent;font-size:15px;transition:all .2s}.pb-tab.active{color:#60a5fa;border-bottom-color:#60a5fa}.pb-mode{display:none}.pb-mode.active{display:block}.pb-tree{margin-top:15px;padding:15px;background:#0f172a;border-radius:6px}.pb-field{margin:8px 0;padding:8px;background:#1e293b;border-radius:4px;border-left:3px solid #3b82f6}.pb-field select{margin-left:10px;padding:4px 8px;background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:4px}.json-compare-features{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;padding:14px 16px;background:#1e293b;border-radius:8px}.json-compare-features span{font-size:13px;color:#94a3b8}.json-compare-container{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:15px}.json-compare-input{min-width:0}.json-compare-input h3{color:#60a5fa;margin-bottom:10px;font-size:16px}.json-compare-input textarea{min-height:250px;font-family:'Courier New',monospace;font-size:13px}.json-diff-viewer{background:#0f172a;border:1px solid #334155;border-radius:6px;font-family:'Courier New',monospace;font-size:13px;min-height:250px;max-height:500px;overflow-x:auto;overflow-y:auto;margin:10px 0}.diff-line{display:flex;align-items:baseline;padding:1px 12px 1px 0;line-height:1.7;color:#e2e8f0}.diff-line::before{content:attr(data-line);display:inline-block;min-width:36px;padding:0 8px;text-align:right;color:#4b5563;border-right:1px solid #334155;margin-right:12px;flex-shrink:0;user-select:none;font-size:12px}.diff-line-content,.diff-line>span{white-space:pre;overflow:hidden;text-overflow:ellipsis}.diff-delete{background:rgba(239,68,68,.2);color:#fca5a5;border-left:3px solid #ef4444}.diff-insert{background:rgba(16,185,129,.2);color:#6ee7b7;border-left:3px solid #10b981}.diff-change{background:rgba(245,158,11,.2);color:#fcd34d;border-left:3px solid #f59e0b}.diff-equal{border-left:3px solid transparent}@media (max-width:768px){.json-compare-container{grid-template-columns:1fr}}.diff-fold{justify-content:center;color:#475569;background:#0a1120;font-style:italic;font-size:12px;border-left:3px solid transparent;cursor:default;user-select:none}.diff-fold::before{display:none}.diff-nav-active{outline:2px solid #60a5fa;outline-offset:-2px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0f172a;border-radius:5px}::-webkit-scrollbar-thumb{background:#334155;border-radius:5px;transition:background .2s}::-webkit-scrollbar-thumb:hover{background:#475569}