:root{--font-family:"Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--line-height:1.5;--font-weight:400;--color-bg-primary:#0f172a;--color-bg-secondary:#1e293b;--color-bg-tertiary:#334155;--color-text-primary:#f8fafc;--color-text-secondary:#94a3b8;--color-text-accent:#38bdf8;--color-text-accent-hover:#0ea5e9;--color-border:#334155;--color-border-hover:#475569;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--transition-base:all .2s ease-in-out}body{min-width:320px;min-height:100vh;font-family:var(--font-family);background-color:var(--color-bg-primary);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}#root{flex-direction:column;width:100%;height:100vh;display:flex}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;line-height:1.2}a{color:var(--color-text-accent);transition:var(--transition-base);text-decoration:none}a:hover{color:var(--color-text-accent-hover)}button{cursor:pointer;background-color:var(--color-bg-secondary);color:var(--color-text-primary);border-radius:var(--radius-md);transition:var(--transition-base);border:1px solid #0000;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500}button:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-hover)}button:focus,button:focus-visible{outline:2px solid var(--color-text-accent);outline-offset:2px}input,textarea,select{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);transition:var(--transition-base);box-sizing:border-box;width:100%;padding:.5rem .75rem;font-family:inherit;font-size:1rem}input:focus,textarea:focus,select:focus{border-color:var(--color-text-accent);box-shadow:0 0 0 1px var(--color-text-accent);outline:none}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.p-4{padding:1rem}.w-full{width:100%}.h-full{height:100%}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.font-bold{font-weight:700}.text-center{text-align:center}.text-secondary{color:var(--color-text-secondary)}.app-layout{background-color:var(--color-bg-primary);width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{background-color:var(--color-bg-secondary);border-right:1px solid var(--color-border);flex-direction:column;flex-shrink:0;width:15%;display:flex}.sidebar-header{border-bottom:1px solid var(--color-border);padding:1.5rem}.logo{color:var(--color-text-accent);align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;display:flex}.sidebar-nav{flex-direction:column;flex:1;gap:.25rem;padding:1rem;display:flex;overflow-y:auto}.nav-item{border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-base);align-items:center;gap:.75rem;padding:.75rem 1rem;font-weight:500;display:flex}.nav-item:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.nav-item.active{color:var(--color-text-accent);background-color:#38bdf81a}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.page-container{flex:1;width:96%;padding:2rem;position:relative;overflow-y:auto}.footer{border-top:1px solid var(--color-border);color:var(--color-text-secondary);text-align:center;background-color:var(--color-bg-primary);flex-shrink:0;padding:1rem;font-size:.875rem}.page-header{margin-bottom:2rem}.page-title{color:var(--color-text-primary);margin-bottom:.5rem;font-size:1.875rem}.page-description{color:var(--color-text-secondary)}.sidebar{position:relative}.sidebar.collapsed{width:5%}.sidebar.collapsed .logo{justify-content:center}.sidebar.collapsed .logo-text,.sidebar.collapsed .nav-text{display:none}.sidebar.collapsed .nav-item{justify-content:center;padding:.75rem .5rem}.sidebar-footer{border-top:1px solid var(--color-border);justify-content:center;padding:.5rem;display:flex}.collapse-trigger{border:1px solid var(--color-border);background-color:var(--color-bg-secondary);width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex}.collapse-trigger:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.sidebar.collapsed .collapse-trigger{transform:rotate(0)}.sidebar.collapsed .sidebar-nav{overflow:visible}.sidebar.collapsed .nav-item{position:relative}.sidebar.collapsed .nav-item:hover:after{content:attr(data-tooltip);background-color:var(--color-bg-tertiary);color:var(--color-text-primary);border-radius:var(--radius-sm);white-space:nowrap;z-index:50;box-shadow:var(--shadow-md);border:1px solid var(--color-border);margin-left:10px;padding:.5rem .75rem;font-size:.875rem;animation:.2s fadeIn;position:absolute;top:50%;left:100%;transform:translateY(-50%)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-50%)translate(-5px)}to{opacity:1;transform:translateY(-50%)translate(0)}}.json-formatter{flex-direction:column;gap:1rem;height:100%;min-height:600px;display:flex}.formatter-controls{justify-content:flex-end;gap:1rem;display:flex}.formatter-workspace{flex:1;grid-template-columns:1fr 1fr;gap:1.5rem;min-height:0;display:grid}.json-output{color:var(--color-text-primary);white-space:pre-wrap;word-break:break-all;background-color:#0000;border:none;border-radius:0;flex:1;padding:1rem;font-family:Geist Mono,Fira Code,monospace;font-size:.875rem;line-height:1.5;overflow:auto}.error-message{color:#ef4444;border-radius:var(--radius-md);background-color:#ef44441a;margin-top:.5rem;padding:.75rem;font-size:.875rem}.action-bar{gap:.5rem;display:flex}.json-diff{flex-direction:column;gap:1rem;height:100%;min-height:600px;display:flex}.diff-workspace{flex-direction:column;gap:1rem;height:100%;display:flex;overflow:hidden}.diff-inputs{flex-shrink:0;grid-template-columns:1fr 1fr;gap:1.5rem;height:35%;display:grid}.editor-container{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:var(--transition-base);flex-direction:column;height:100%;display:flex;overflow:hidden}.json-input{resize:none;width:100%;color:var(--color-text-primary);background-color:#0000;border:none;border-radius:0;flex:1;padding:1rem;font-family:Geist Mono,Fira Code,monospace;font-size:.875rem;line-height:1.5}.json-input:focus{box-shadow:none;outline:none}.diff-container{background-color:#0000;flex-direction:column;flex:1;display:flex;overflow:hidden}.base64-tool{flex-direction:column;gap:1rem;height:100%;min-height:500px;display:flex}.base64-workspace{flex-direction:column;flex:1;gap:1.5rem;display:flex}.native-ascii-tool{flex-direction:column;gap:1.5rem;height:100%;min-height:500px;display:flex}.native-ascii-workspace{flex-direction:column;flex:1;gap:1.5rem;display:flex}@media (width>=768px){.conversion-panels{grid-template-columns:1fr 1fr}}.editor-container{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:var(--transition-base);flex-direction:column;display:flex;overflow:hidden}.editor-container:focus-within{border-color:var(--color-text-accent);box-shadow:0 0 0 1px var(--color-text-accent)}.panel-header{background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.panel-title{color:var(--color-text-primary);font-size:.875rem;font-weight:600}.panel-actions{align-items:center;gap:.5rem;display:flex}.icon-button{width:28px;height:28px;color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:var(--transition-base);background-color:#0000;border:1px solid #0000;justify-content:center;align-items:center;padding:0;display:flex}.icon-button:hover:not(:disabled){color:var(--color-text-primary);background-color:#ffffff1a}.icon-button:disabled{opacity:.5;cursor:not-allowed}.text-area{resize:none;width:100%;color:var(--color-text-primary);background-color:#0000;border:none;border-radius:0;flex:1;padding:1rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:.875rem;line-height:1.6}.text-area:focus{box-shadow:none;border-color:#0000;outline:none}.native-ascii-hint{color:var(--color-text-secondary);border-radius:var(--radius-md);background-color:#38bdf814;border:1px solid #38bdf833;align-items:center;gap:.5rem;margin-top:auto;padding:.75rem 1rem;font-size:.875rem;display:flex}.hash-tool{flex-direction:column;gap:1rem;height:100%;min-height:500px;display:flex}.hash-workspace{flex-direction:column;flex:1;gap:1rem;display:flex;overflow-y:auto}.input-section{flex-direction:column;gap:.25rem;display:flex}.json-input{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md)}.hash-results{grid-template-columns:1fr;gap:.75rem;display:grid}.hash-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);flex-direction:column;justify-content:center;gap:.25rem;padding:.75rem;display:flex}.hash-label{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:500}.hash-value-container{align-items:center;gap:.5rem;display:flex}.hash-value{color:var(--color-text-accent);word-break:break-all;white-space:nowrap;text-overflow:ellipsis;flex:1;font-family:Geist Mono,Fira Code,monospace;font-size:.85rem;overflow:hidden}.copy-btn{color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:var(--transition-base);background-color:#0000;justify-content:center;align-items:center;padding:.25rem;display:flex}.copy-btn:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.copy-btn:disabled{opacity:.5;cursor:not-allowed}.timestamp-tool{flex-direction:column;gap:1rem;height:100%;min-height:500px;display:flex}.timestamp-workspace{flex-direction:column;flex:1;gap:1.5rem;display:flex}.now-section{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);flex-direction:column;align-items:center;gap:.5rem;padding:1rem;display:flex}.current-time-display{color:var(--color-text-accent);font-family:Geist Mono,Fira Code,monospace;font-size:2.5rem;font-weight:700}.current-time-meta{color:var(--color-text-secondary);gap:1.5rem;display:flex}.converter-section{flex-direction:column;gap:1rem;display:flex}.converter-card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);flex-direction:column;gap:.5rem;padding:1rem;display:flex}.converter-row{grid-template-columns:1fr 2rem 1fr;align-items:center;gap:1rem;display:grid}.arrow-icon{color:var(--color-text-secondary);justify-content:center;display:flex}.input-group{flex-direction:column;gap:.35rem;display:flex}.uuid-tool{flex-direction:column;gap:1rem;height:100%;min-height:500px;display:flex}.uuid-workspace{flex-direction:column;flex:1;gap:2rem;display:flex}.control-panel{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);align-items:center;gap:1.5rem;padding:1.5rem;display:flex}.count-selector{align-items:center;gap:.5rem;display:flex}.generate-btn{background-color:var(--color-text-accent);color:#fff;border-color:var(--color-text-accent);margin-left:auto}.generate-btn:hover{background-color:var(--color-text-accent-hover)}.uuid-list{flex-direction:column;gap:.75rem;display:flex}.uuid-item{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);align-items:center;padding:.75rem 1rem;font-family:Geist Mono,Fira Code,monospace;font-size:1rem;display:flex}.uuid-text{color:var(--color-text-primary);flex:1}.aes-tool{flex-direction:column;gap:1rem;height:100%;min-height:500px;display:flex}.aes-workspace{flex-direction:column;flex:1;gap:1.5rem;display:flex}.aes-config{background:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border);align-items:center;gap:1rem;padding:1rem;display:flex}.aes-config label{color:var(--color-text-secondary);font-weight:500}.aes-key-input{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);flex:1;padding:.5rem .75rem;font-family:Geist Mono,Fira Code,monospace;font-size:.9rem}.aes-key-input:focus{border-color:var(--color-text-accent);outline:none}.conversion-panels{flex:1;grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.panel-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.panel-title{color:var(--color-text-secondary);font-weight:500}.text-area{resize:none;background-color:var(--color-bg-secondary);width:100%;height:100%;color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;font-family:Geist Mono,Fira Code,monospace;font-size:.9rem;line-height:1.5}.text-area:focus{border-color:var(--color-text-accent);outline:none}.json-to-java{flex-direction:column;gap:1rem;height:100%;min-height:600px;display:flex}.json-to-java-workspace{flex:1;grid-template-columns:1fr 1fr;gap:1.5rem;min-height:0;display:grid}@media (width<=1024px){.json-to-java-workspace{grid-template-rows:1fr 1fr;grid-template-columns:1fr}}.json-to-java .editor-container{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:var(--transition-base);flex-direction:column;height:100%;display:flex;overflow:hidden}.json-to-java .editor-container:focus-within{border-color:var(--color-text-accent);box-shadow:0 0 0 1px var(--color-text-accent)}.json-to-java .panel-header{background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.json-to-java .panel-title{color:var(--color-text-primary);font-size:.875rem;font-weight:600}.json-to-java .panel-actions{align-items:center;gap:.5rem;display:flex}.json-to-java .root-name-input{background-color:var(--color-bg-primary);border:1px solid var(--color-border);color:var(--color-text-primary);border-radius:var(--radius-sm);width:160px;height:30px;transition:var(--transition-base);padding:.25rem .6rem;font-family:Geist Mono,Fira Code,monospace;font-size:.875rem}.json-to-java .root-name-input:focus{border-color:var(--color-text-accent);box-shadow:0 0 0 1px var(--color-text-accent);outline:none}.json-to-java .json-input,.json-to-java .java-output{resize:none;width:100%;color:var(--color-text-primary);background-color:#0000;border:none;border-radius:0;flex:1;padding:1rem;font-family:Geist Mono,Fira Code,monospace;font-size:.875rem;line-height:1.5}.json-to-java .json-input:focus,.json-to-java .java-output:focus{box-shadow:none;outline:none}.json-to-java .java-output-container{flex-direction:column;display:flex}.json-to-java .java-output-wrapper{flex-direction:column;flex:1;display:flex;overflow:hidden}.json-to-java .java-output{color:var(--color-text-primary);white-space:pre;background-color:#0000;flex:1;overflow:auto}.json-to-java .empty-state{background-color:#0000;flex:1;justify-content:center;align-items:center;display:flex}.json-to-java .error-message{color:#ef4444;border-radius:var(--radius-md);background-color:#ef44441a;margin:.5rem 1rem 1rem;padding:.75rem;font-size:.875rem}.url-encode-tool{flex-direction:column;gap:1.5rem;height:100%;min-height:500px;display:flex}.url-encode-workspace{flex-direction:column;flex:1;gap:1rem;display:flex}.url-encode-mode-bar{flex-direction:column;gap:.75rem;display:flex}.url-encode-mode-selector{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);align-self:flex-start;gap:.25rem;padding:.25rem;display:inline-flex}.url-encode-mode-option{color:var(--color-text-secondary);border-radius:var(--radius-sm);background-color:#0000;border:1px solid #0000;padding:.45rem .75rem;font-size:.875rem}.url-encode-mode-option:hover{color:var(--color-text-primary);background-color:var(--color-bg-tertiary)}.url-encode-mode-option.active{color:var(--color-text-primary);background-color:var(--color-bg-tertiary);border-color:var(--color-border-hover)}.url-encode-mode-description{color:var(--color-text-secondary);font-size:.875rem}.url-encode-error{color:#fca5a5;border-radius:var(--radius-md);background-color:#ef44441a;border:1px solid #ef444440;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.875rem;display:flex}.url-encode-conversion-panels{flex:1;grid-template-columns:1fr;gap:1.5rem;display:grid}@media (width>=768px){.url-encode-conversion-panels{grid-template-columns:1fr 1fr}}.url-encode-editor-container{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:260px;transition:var(--transition-base);flex-direction:column;display:flex;overflow:hidden}.url-encode-editor-container:focus-within{border-color:var(--color-text-accent);box-shadow:0 0 0 1px var(--color-text-accent)}.url-encode-panel-header{background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.url-encode-panel-title{color:var(--color-text-primary);font-size:.875rem;font-weight:600}.url-encode-panel-actions{align-items:center;gap:.5rem;display:flex}.url-encode-icon-button{width:28px;height:28px;color:var(--color-text-secondary);border-radius:var(--radius-sm);background-color:#0000;border:1px solid #0000;justify-content:center;align-items:center;padding:0;display:flex}.url-encode-icon-button:hover:not(:disabled){color:var(--color-text-primary);background-color:#ffffff1a}.url-encode-icon-button:disabled{opacity:.5;cursor:not-allowed}.url-encode-text-area{resize:none;width:100%;color:var(--color-text-primary);background-color:#0000;border:none;border-radius:0;flex:1;padding:1rem;font-family:Geist Mono,Fira Code,monospace;font-size:.875rem;line-height:1.6}.url-encode-text-area:focus{box-shadow:none;border-color:#0000;outline:none}.url-encode-hint{color:var(--color-text-secondary);border-radius:var(--radius-md);background-color:#38bdf814;border:1px solid #38bdf833;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.875rem;display:flex}