:root{--b64:#0d7c83;--b642:#4169b1;--ink:#17212e}.b64-page{max-width:1180px}.b64-hero{background:linear-gradient(135deg,#eafafa,#eef3ff)}.b64-trust{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin:-5px 0 22px}.b64-trust span{padding:8px 13px;background:#fff;border:1px solid #d8e7e8;border-radius:999px;font-size:.77rem;color:#4e5e67}.b64-banner{display:none;padding:13px 16px;margin-bottom:15px;border:1px solid #ffc7c1;background:#fff0ef;color:#a82d25;border-radius:11px}.b64-banner.show{display:block}.b64-shell{background:#fff;border:1px solid #dce7e8;border-radius:20px;overflow:hidden;box-shadow:0 18px 55px #243a4017}.b64-upload{position:relative;margin:20px;padding:58px 22px;text-align:center;border:2px dashed #b6d3d5;border-radius:16px;background:linear-gradient(145deg,#faffff,#f2f8fb);transition:.2s}.b64-upload.drag,.b64-upload:hover{border-color:var(--b64);background:#effafa}.b64-upload>input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.b64-mark{display:flex;justify-content:center;align-items:center;gap:10px}.b64-mark b,.b64-mark span{padding:15px;border-radius:13px}.b64-mark b{background:#e9f3fc;color:#376ca2}.b64-mark span{background:var(--b64);color:#fff;font-weight:800}.b64-upload h2{margin:18px 0 5px}.b64-upload>p{margin:0;color:#687880}.b64-upload>em{display:inline-block;margin:17px 0 9px;padding:10px 21px;background:var(--ink);color:#fff;border-radius:10px;font-style:normal;font-weight:700}.b64-upload>small{display:block;color:#75838a}.b64-filebar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e3ebec}.b64-filebar>div{display:flex;align-items:center;gap:11px;min-width:0}.b64-filebar>div>b{background:#e6f5f5;color:var(--b64);padding:12px;border-radius:9px}.b64-filebar span{display:grid;min-width:0}.b64-filebar strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b64-filebar small{color:#748188;margin-top:3px}.b64-filebar button,.b64-result button{border:0;border-radius:9px;padding:9px 13px;cursor:pointer}.b64-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr)}.b64-preview{padding:20px;background:#f2f5f6}.b64-preview-head{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;margin-bottom:11px}.b64-preview-head small{color:#748188;font-weight:400}.b64-preview>div:nth-child(2){min-height:410px;display:flex;align-items:center;justify-content:center;padding:13px;background:repeating-conic-gradient(#dce3e5 0 25%,#edf0f1 0 50%) 50%/22px 22px;border-radius:12px}.b64-preview img{max-width:100%;max-height:560px;object-fit:contain;box-shadow:0 4px 18px #283b4033}.b64-preview>p{font-size:.73rem;color:#748188}.b64-controls{padding:22px;display:flex;flex-direction:column;gap:16px}.b64-step{display:flex;gap:10px}.b64-step>b{width:28px;height:28px;display:grid;place-items:center;background:var(--b64);color:#fff;border-radius:50%}.b64-step span{display:grid}.b64-step small{color:#748188;margin-top:2px}.b64-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.b64-modes button{border:1px solid #d1dcde;background:#fff;border-radius:11px;padding:12px;text-align:left;cursor:pointer}.b64-modes button.active{border-color:var(--b64);background:#eefafa;box-shadow:0 0 0 2px #0d7c8317}.b64-modes b{color:var(--b64)}.b64-modes span,.b64-modes small{display:block}.b64-modes span{font-size:.78rem;font-weight:700;margin-top:5px}.b64-modes small{font-weight:400;color:#748188;margin-top:2px}.b64-controls label{font-size:.76rem;font-weight:700}.b64-controls input,.b64-controls select{box-sizing:border-box;width:100%;padding:9px;border:1px solid #cad7d9;border-radius:8px;font:inherit;margin-top:5px}.b64-controls input[type=range]{padding:0;accent-color:var(--b64)}.b64-controls output{float:right;color:var(--b64)}.b64-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}.b64-controls #transform-panel{padding:13px;background:#f5f8f8;border-radius:11px}.b64-controls #transform-panel>label{display:block;margin-top:10px}.b64-controls #transform-panel>small{display:block;color:#748188;font-size:.68rem;line-height:1.45;margin-top:9px}.b64-controls>button{border:0;border-radius:11px;padding:13px;background:linear-gradient(135deg,var(--b64),var(--b642));color:#fff;font:700 .95rem inherit;cursor:pointer}.b64-controls>button:disabled{opacity:.5}.b64-usage{text-align:center;color:#748188;font-size:.69rem;margin:0}.b64-overlay{position:fixed;z-index:1000;inset:0;background:#fffffff0;display:none;place-items:center;align-content:center;text-align:center}.b64-overlay.show{display:grid}.b64-loader{width:46px;height:46px;border:5px solid #dceced;border-top-color:var(--b64);border-radius:50%;animation:b64spin .8s linear infinite}@keyframes b64spin{to{transform:rotate(360deg)}}.b64-overlay h2{margin:15px 0 5px}.b64-overlay p{color:#6f7d84}.b64-result{padding:20px}.b64-result-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.b64-result-head>div:first-child{display:grid}.b64-result-head span{font-weight:700}.b64-result-head small{color:#748188;margin-top:3px}.b64-result-head #download-btn{background:var(--b64);color:#fff;font-weight:700}.b64-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.b64-stats div{padding:12px;background:#f4f7f7;border-radius:9px}.b64-stats b,.b64-stats small{display:block}.b64-stats small{color:#748188}.b64-warning{padding:11px;margin-bottom:13px;background:#fff8df;border:1px solid #efdda1;color:#765f18;border-radius:9px;font-size:.8rem}.b64-tabs{display:flex;gap:6px;overflow:auto;margin-bottom:10px}.b64-tabs button{white-space:nowrap;border:1px solid #d0dcde;background:#fff;border-radius:8px;padding:8px 12px;cursor:pointer}.b64-tabs button.active{background:var(--b64);border-color:var(--b64);color:#fff}.b64-output-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:.78rem;font-weight:700}.b64-output-head button,.b64-result-foot button{border:1px solid #ccd8da;background:#fff;border-radius:7px;padding:7px 10px}.b64-result textarea{box-sizing:border-box;width:100%;height:400px;padding:14px;border:1px solid #cbd8da;border-radius:10px;background:#17212e;color:#dfeeed;resize:vertical;font:12px/1.55 Consolas,monospace}.b64-result-foot{display:flex;gap:7px;margin-top:9px}.b64-when,.b64-guide,.b64-steps,.b64-faq{margin-top:50px}.b64-when>div:first-child{text-align:center;max-width:680px;margin:auto}.b64-when>div:first-child span{color:var(--b64);font-weight:700}.b64-cards,.b64-guide>div,.b64-steps>div{display:grid;gap:14px;margin-top:20px}.b64-cards,.b64-guide>div{grid-template-columns:repeat(3,1fr)}.b64-steps>div{grid-template-columns:repeat(4,1fr)}.b64-cards article,.b64-guide article,.b64-steps article{border:1px solid #dfe8e9;border-radius:14px;padding:19px;background:#fff}.b64-cards .good{border-top:3px solid #31a46f}.b64-cards .review{border-top:3px solid #e0a72e}.b64-cards .avoid{border-top:3px solid #d4584e}.b64-cards ul{padding-left:18px;color:#68777d;font-size:.84rem;line-height:1.8}.b64-guide p,.b64-steps p,.b64-faq p{color:#68777d;font-size:.84rem;line-height:1.6}.b64-guide strong,.b64-steps b{color:var(--b64)}.b64-faq{max-width:820px;margin-left:auto;margin-right:auto}.b64-faq details{padding:15px 3px;border-bottom:1px solid #dfe8e9}.b64-faq summary{font-weight:700;cursor:pointer}@media(max-width:900px){.b64-grid{grid-template-columns:1fr}.b64-preview>div:nth-child(2){min-height:300px}.b64-steps>div{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.b64-upload{margin:10px;padding:42px 14px}.b64-preview{padding:12px}.b64-controls{padding:16px}.b64-modes,.b64-two,.b64-stats,.b64-cards,.b64-guide>div,.b64-steps>div{grid-template-columns:1fr}.b64-result-head{align-items:flex-start;flex-direction:column}.b64-preview>div:nth-child(2){min-height:220px}.b64-result textarea{height:330px}}