.base64-to-json-container{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;max-width:1200px;margin:0 auto;padding:20px;background-color:#f9f9f9;color:#333;min-height:100vh;transition:all .3s ease}.base64-to-json-container.dark-mode{background-color:#1a1a1a;color:#f0f0f0}.base64-to-json-container.dark-mode .base64-textarea,.base64-to-json-container.dark-mode .json-output{background-color:#2d2d2d;color:#f0f0f0;border-color:#444}.base64-to-json-container.dark-mode .info-section,.base64-to-json-container.dark-mode .section-header{border-color:#444}.base64-to-json-container.dark-mode .json-output .token.property{color:#9a6e3a}.base64-to-json-container.dark-mode .json-output .token.string{color:#690}.base64-to-json-container.dark-mode .json-output .token.number{color:#905}.base64-to-json-container.dark-mode .json-output .token.boolean{color:#07a}.base64-to-json-container.dark-mode .json-output .token.null{color:#e90}.base64-to-json-container.dark-mode .json-output .token.punctuation{color:#999}.base64-to-json-container.dark-mode .json-output .token.operator{color:#9a6e3a}.base64-to-json-container.dark-mode .json-output .token.key{color:#07a}.base64-to-json-container.dark-mode .json-output .token.property{color:#f8c555}.base64-to-json-container.dark-mode .json-output .token.string{color:#7ec699}.base64-to-json-container.dark-mode .json-output .token.number{color:#d6a2e6}.base64-to-json-container.dark-mode .json-output .token.boolean{color:#5da9f7}.base64-to-json-container.dark-mode .json-output .token.null{color:#ffa657}.base64-to-json-container.dark-mode .json-output .token.punctuation{color:#bbb}.base64-to-json-container.dark-mode .json-output .token.operator{color:#f8c555}.base64-to-json-container.dark-mode .json-output .token.key{color:#5da9f7}.header{display:flex;justify-content:center;align-items:center;justify-content:space-between;margin-bottom:30px;padding-bottom:15px;border-bottom:1px solid #ddd}.header h1{margin:0;font-size:2rem;color:#3498db}.theme-toggle{background:none;border:1px solid #3498db;color:#3498db;padding:8px 15px;border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:600}.theme-toggle:hover{background-color:#3498db;color:#fff}.converter-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:30px}@media(min-width:768px){.converter-grid{grid-template-columns:1fr 1fr}}.input-section,.output-section{background:#fff;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);padding:20px;transition:all .3s ease}.dark-mode .input-section,.dark-mode .output-section{background-color:rgb(18.35,18.35,18.35)}.section-header{display:flex;justify-content:center;align-items:center;justify-content:space-between;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #eee}.section-header h2{margin:0;font-size:1.5rem}.action-buttons,.output-actions{display:flex;gap:10px}button{padding:8px 15px;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease}button.sample-btn{background-color:#f39c12;color:#fff}button.sample-btn:hover{background-color:hsl(36.8,90.3614457831%,41.1764705882%)}button.clear-btn{background-color:#95a5a6;color:#fff}button.clear-btn:hover{background-color:hsl(183.5294117647,8.7179487179%,51.7647058824%)}button.copy-btn{background-color:#2ecc71;color:#fff}button.copy-btn:hover:not(:disabled){background-color:rgb(36.616,162.384,89.948);transform:translateY(-2px);box-shadow:0 2px 5px rgba(0,0,0,.2)}button.copy-btn:disabled{background-color:#bdc3c7;cursor:not-allowed}button.format-btn{background-color:#555;color:#fff}button.format-btn:hover{background-color:rgb(59.5,59.5,59.5)}button.format-btn.active{background-color:#3498db}.base64-textarea,.json-output{width:100%;min-height:300px;padding:15px;border:1px solid #ddd;border-radius:8px;font-family:Courier New,Courier,monospace;font-size:14px;resize:vertical;background-color:#fff;transition:all .3s ease}.json-output{white-space:pre-wrap;word-wrap:break-word;overflow-y:auto;background-color:#f8f8f8}.json-output .token.property{color:#9a6e3a}.json-output .token.string{color:#690}.json-output .token.number{color:#905}.json-output .token.boolean{color:#07a}.json-output .token.null{color:#e90}.json-output .token.punctuation{color:#999}.json-output .token.operator{color:#9a6e3a}.json-output .token.key{color:#07a}.error-message{color:#e74c3c;margin-top:10px;font-weight:600}.loading-indicator{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%;gap:10px}.loading-indicator .spinner{width:40px;height:40px;border-radius:50%;border:4px solid rgba(52,152,219,.3);border-top-color:#3498db;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(1turn)}}.info-section{margin-top:30px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);transition:all .3s ease}.dark-mode .info-section{background-color:rgb(18.35,18.35,18.35)}.info-section h3,.info-section h4{color:#3498db}.info-section ol,.info-section ul{padding-left:20px}.info-section .features{margin-top:20px}@media(max-width:768px){.header{flex-direction:column;gap:15px;text-align:center}.action-buttons,.output-actions{justify-content:center}}@media(max-width:480px){.base64-to-json-container{padding:15px}.base64-textarea,.json-output{min-height:200px}.action-buttons,.output-actions{flex-direction:column;gap:8px}button{width:100%}}