.base64-page{background-color:#f5f5f5;min-height:100vh;padding:24px}.base64-page .main-card{border-radius:8px;max-width:1200px;margin:0 auto;box-shadow:0 2px 8px #0000001a}.base64-page .main-card .page-title{text-align:center;color:#000000e0;margin-bottom:12px;font-weight:600}.base64-page .main-card .page-title .title-icon{margin-right:8px}.base64-page .main-card .description{text-align:center;color:#00000073;margin-bottom:32px;font-size:14px;line-height:1.5}.base64-page .input-card,.base64-page .output-card{border-radius:6px}.base64-page .input-card .card-title,.base64-page .output-card .card-title{font-size:16px;font-weight:500}.base64-page .input-card .code-textarea,.base64-page .output-card .code-textarea{border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace;font-size:14px;line-height:1.6}.base64-page .input-card .code-textarea:hover,.base64-page .output-card .code-textarea:hover{border-color:#40a9ff}.base64-page .input-card .code-textarea:focus,.base64-page .output-card .code-textarea:focus{border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33}.base64-page .action-buttons{justify-content:center;margin:24px 0;display:flex}.base64-page .action-buttons .action-btn{min-width:120px;height:40px}.base64-page .action-buttons .action-btn:hover{transition:all .3s;transform:translateY(-1px)}.base64-page .action-buttons .swap-btn{background-color:#fafafa;border-color:#d9d9d9}.base64-page .action-buttons .swap-btn:hover:not(:disabled){color:#1890ff;border-color:#1890ff}.base64-page .clear-btn{color:#ff4d4f;border-color:#ff4d4f}.base64-page .clear-btn:hover:not(:disabled){color:#ff7875;border-color:#ff7875}.base64-page .clear-btn:disabled{color:#00000040;border-color:#d9d9d9}@media (max-width:768px){.base64-page{padding:12px}.base64-page .main-card .page-title{font-size:20px}.base64-page .action-buttons .action-btn{min-width:100px}}