.jwt-tool[data-v-5b66b530]{width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 0 10px #0000001a;box-sizing:border-box}h1[data-v-5b66b530]{text-align:center;margin-bottom:20px}.tool-container[data-v-5b66b530]{display:flex;gap:20px;width:100%}.left-panel[data-v-5b66b530],.right-panel[data-v-5b66b530]{flex:1;width:50%}.input-group[data-v-5b66b530],.output-group[data-v-5b66b530]{margin-bottom:20px}label[data-v-5b66b530]{display:block;margin-bottom:5px;font-weight:700}textarea[data-v-5b66b530],input[data-v-5b66b530]{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-family:monospace;box-sizing:border-box}textarea[data-v-5b66b530]{min-height:150px;resize:vertical}.header-textarea[data-v-5b66b530]{min-height:110px}.jwt-textarea[data-v-5b66b530]{min-height:190px}.payload-textarea[data-v-5b66b530]{min-height:180px}.button-group[data-v-5b66b530]{display:flex;justify-content:space-between;gap:10px;margin-top:20px}button[data-v-5b66b530]{flex:1;padding:10px 20px;background-color:var(--primary-color, #4CAF50);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px}button[data-v-5b66b530]:hover{background-color:var(--primary-hover-color, #45a049)}.error-message[data-v-5b66b530],.success-message[data-v-5b66b530]{margin-top:10px;text-align:center}.error-message[data-v-5b66b530]{color:red}.success-message[data-v-5b66b530]{color:green}@media (max-width: 768px){.tool-container[data-v-5b66b530]{flex-direction:column}.left-panel[data-v-5b66b530],.right-panel[data-v-5b66b530]{width:100%}}.tree-item[data-v-5450f990]{font-family:monospace;line-height:1.5}.tree-content[data-v-5450f990]{display:flex;align-items:center;padding:2px 0}.toggle[data-v-5450f990]{cursor:pointer;-webkit-user-select:none;user-select:none;margin-right:5px;width:15px;display:inline-block;text-align:center}.key[data-v-5450f990]{font-weight:700;margin-right:5px}.value[data-v-5450f990]{color:#07a}.value-count[data-v-5450f990]{color:#888;font-style:italic}.children[data-v-5450f990]{border-left:1px dotted #ccc;margin-left:7px}.json-formatter[data-v-cf2462ee]{padding:20px;height:100%;display:flex;flex-direction:column}.container[data-v-cf2462ee]{display:flex;gap:20px;flex:1;overflow:hidden}.input-section[data-v-cf2462ee],.output-section[data-v-cf2462ee]{flex:1;display:flex;flex-direction:column;overflow:hidden}textarea[data-v-cf2462ee]{width:100%;flex:1;resize:none;border:1px solid #ccc;border-radius:8px;padding:10px}.button-group[data-v-cf2462ee]{margin-bottom:10px}button[data-v-cf2462ee]{margin-right:10px;border-radius:4px;padding:8px 16px;background-color:#4caf50;color:#fff;border:none;cursor:pointer;transition:background-color .3s}button[data-v-cf2462ee]:hover{background-color:#45a049}.json-tree[data-v-cf2462ee]{border:1px solid #ccc;border-radius:8px;padding:10px;flex:1;overflow-y:auto;overflow-x:auto;white-space:nowrap;background-color:#f9f9f9}.json-tree>div[data-v-cf2462ee]:first-child{margin-top:5px}.json-tree>div[data-v-cf2462ee]:last-child{margin-bottom:5px}:root{--primary-color: #4CAF50;--primary-hover-color: #45a049;--background-color: #f4f4f4;--text-color: #333;--border-color: #ddd}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%;width:100%}body{font-family:Arial,sans-serif;line-height:1.6;color:var(--text-color);background-color:var(--background-color)}.app{display:flex;flex-direction:column;height:100%;width:100%;overflow-x:hidden}.tab-container{display:flex;justify-content:center;background-color:#f1f1f1;border-bottom:1px solid var(--border-color);padding:0 20px}.tab{padding:15px 20px;cursor:pointer;transition:background-color .3s ease,color .3s ease;text-decoration:none;color:var(--text-color);position:relative;margin:0 5px}.tab:hover{background-color:#e0e0e0}.tab.active{color:var(--primary-color);font-weight:700}.tab.active:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:var(--primary-color)}.content-container{flex:1;overflow-y:auto;padding:20px;display:flex;justify-content:center;align-items:flex-start;width:100%}.sql-log-parser,.jwt-tool,.json-formatter{width:100%;background-color:#fff;border-radius:8px;box-shadow:0 0 20px #0000001a;padding:20px}h1{text-align:center;color:var(--text-color);margin-bottom:2rem}.input-group,.output-group{margin-bottom:1.5rem}label{display:block;margin-bottom:.5rem;font-weight:700}textarea{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:4px;resize:vertical;min-height:150px;font-size:14px;line-height:1.5}button{display:block;width:100%;padding:12px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .3s ease}button:hover{background-color:var(--primary-hover-color)}.notification{position:fixed;bottom:20px;right:20px;background-color:var(--primary-color);color:#fff;padding:15px 20px;border-radius:4px;box-shadow:0 2px 10px #0003;font-size:14px;transition:opacity .3s ease}.json-formatter{display:flex;flex-direction:column;height:calc(100vh - 120px)}.json-formatter .container{display:flex;gap:20px;flex:1}.json-formatter .input-section,.json-formatter .output-section{flex:1;display:flex;flex-direction:column}.json-formatter textarea,.json-formatter .json-tree{flex:1;overflow-y:auto;min-height:0}.json-formatter .button-group{display:flex;gap:10px;margin-bottom:10px}.json-formatter .button-group button{flex:1}@media (max-width: 768px){.json-formatter .container{flex-direction:column}.json-formatter .input-section,.json-formatter .output-section{width:100%}.json-formatter{height:auto}.json-formatter textarea,.json-formatter .json-tree{height:300px}}@media (max-width: 600px){.tab-container{padding:0 10px}.tab{padding:10px 15px;font-size:14px}}