.base64-to-yaml-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-yaml-container.dark-mode{background-color:#1a1a1a;color:#f0f0f0}.base64-to-yaml-container.dark-mode .base64-textarea,.base64-to-yaml-container.dark-mode .yaml-output{background-color:#2d2d2d;color:#f0f0f0;border-color:#444}.base64-to-yaml-container.dark-mode .info-section,.base64-to-yaml-container.dark-mode .section-header{border-color:#444}.base64-to-yaml-container.dark-mode .yaml-output .yaml-key{color:#905}.base64-to-yaml-container.dark-mode .yaml-output .yaml-string{color:#690}.base64-to-yaml-container.dark-mode .yaml-output .yaml-number{color:#07a}.base64-to-yaml-container.dark-mode .yaml-output .yaml-boolean{color:#9a6e3a}.base64-to-yaml-container.dark-mode .yaml-output .yaml-null{color:#e90}.base64-to-yaml-container.dark-mode .yaml-output .yaml-comment{color:#999;font-style:italic}.base64-to-yaml-container.dark-mode .yaml-output .yaml-punctuation{color:#555}.base64-to-yaml-container.dark-mode .yaml-output .yaml-key{color:#d6a2e6}.base64-to-yaml-container.dark-mode .yaml-output .yaml-string{color:#7ec699}.base64-to-yaml-container.dark-mode .yaml-output .yaml-number{color:#5da9f7}.base64-to-yaml-container.dark-mode .yaml-output .yaml-boolean{color:#f8c555}.base64-to-yaml-container.dark-mode .yaml-output .yaml-null{color:#ffa657}.base64-to-yaml-container.dark-mode .yaml-output .yaml-comment,.base64-to-yaml-container.dark-mode .yaml-output .yaml-punctuation{color:#bbb}.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}.output-actions{align-items:center}.output-actions .indentation-select{display:flex;align-items:center;gap:5px}.output-actions .indentation-select label{font-size:.9rem;color:#666}.dark-mode .output-actions .indentation-select label{color:#aaa}.output-actions .indentation-select select{padding:5px;border-radius:4px;border:1px solid #ddd;background-color:#fff}.dark-mode .output-actions .indentation-select select{background-color:#2d2d2d;color:#f0f0f0;border-color:#444}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.line-numbers-btn{background-color:#555;color:#fff}button.line-numbers-btn:hover{background-color:rgb(59.5,59.5,59.5)}button.line-numbers-btn.active{background-color:#3498db}.base64-textarea,.yaml-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}.yaml-output{white-space:pre-wrap;word-wrap:break-word;overflow-y:auto;background-color:#f8f8f8}.yaml-output .yaml-key{color:#905}.yaml-output .yaml-string{color:#690}.yaml-output .yaml-number{color:#07a}.yaml-output .yaml-boolean{color:#9a6e3a}.yaml-output .yaml-null{color:#e90}.yaml-output .yaml-comment{color:#999;font-style:italic}.yaml-output .yaml-punctuation{color:#555}.yaml-output.with-line-numbers{counter-reset:line;padding-left:3.5em;position:relative}.yaml-output.with-line-numbers:before{content:"";position:absolute;left:0;top:0;width:3em;height:100%;border-right:1px solid #ddd;background-color:#f0f0f0}.dark-mode .yaml-output.with-line-numbers:before{background-color:#2a2a2a;border-right-color:#444}.yaml-output.with-line-numbers span{display:block;position:relative}.yaml-output.with-line-numbers span:before{counter-increment:line;content:counter(line);position:absolute;left:-3.5em;width:2.5em;text-align:right;padding-right:.5em;color:#999}.dark-mode .yaml-output.with-line-numbers span:before{color:#777}.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:600px){.output-actions{flex-wrap:wrap;justify-content:flex-start}}@media(max-width:480px){.base64-to-yaml-container{padding:15px}.base64-textarea,.yaml-output{min-height:200px}.action-buttons,.output-actions{flex-direction:column;gap:8px;align-items:stretch}button{width:100%}.indentation-select{justify-content:space-between}}