.container{width:100%}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Microsoft YaHei,sans-serif}body{background:linear-gradient(135deg,#f0f4ff,#e8f0fe);min-height:100vh;padding:15px;position:relative}.container{background:#fff;border-radius:16px;max-width:1200px;margin:0 auto;padding:25px 20px;box-shadow:0 8px 32px #8aadff26}h1{text-align:center;color:#2d3748;letter-spacing:.3px;cursor:pointer;margin-bottom:25px;font-size:24px;font-weight:600;transition:color .2s}h1:hover{color:#3b82f6}.filename-wrapper{opacity:0;margin-bottom:18px;transition:all .3s;display:none;transform:translateY(-10px)}.filename-wrapper.show{opacity:1;display:block;transform:translateY(0)}.filename-label{color:#4a5568;margin-bottom:8px;font-size:15px;font-weight:500;display:block}#customFilename{border:1px solid #e2e8f0;border-radius:10px;width:100%;padding:12px 15px;font-size:14px;transition:all .3s}#customFilename:focus{border-color:#60a5fa;outline:none;box-shadow:0 0 0 3px #60a5fa1a}.filename-hint{color:#718096;margin-top:5px;font-size:12px;display:block}.editor-wrapper{margin-bottom:25px}.editor-label{color:#4a5568;margin-bottom:10px;font-size:15px;font-weight:500;display:block}#code{resize:vertical;white-space:pre-wrap;background:#fafafa;border:1px solid #e2e8f0;border-radius:12px;width:100%;height:280px;padding:15px;font-family:Consolas,Monaco,monospace;font-size:13px;transition:all .3s}#code:focus{background:#fff;border-color:#60a5fa;outline:none;box-shadow:0 0 0 3px #60a5fa1a}.char-count{text-align:right;color:#718096;margin-top:5px;font-size:12px;display:block}.btn-group{grid-template-columns:repeat(2,1fr);gap:12px;width:100%;margin-bottom:25px;display:grid}.btn{cursor:pointer;color:#fff;white-space:nowrap;border:none;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:12px 15px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.btn:disabled{opacity:.7;cursor:not-allowed;box-shadow:none;transform:none}.btn svg{width:16px;height:16px}.btn-save{background:#10b981}.btn-save:hover:not(:disabled){background:#059669;transform:translateY(-2px);box-shadow:0 4px 12px #10b98133}.btn-load{background:#3b82f6}.btn-load:hover:not(:disabled){background:#2563eb;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f633}.btn-copy{color:#fff;background:#f59e0b}.btn-copy:hover:not(:disabled){background:#d97706;transform:translateY(-2px);box-shadow:0 4px 12px #f59e0b33}.btn-clear{background:#ef4444}.btn-clear:hover:not(:disabled){background:#dc2626;transform:translateY(-2px);box-shadow:0 4px 12px #ef444433}.file-list-wrapper{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:15px}.file-list-label{color:#4a5568;cursor:pointer;align-items:center;gap:8px;margin-bottom:12px;font-size:15px;font-weight:500;transition:color .2s;display:flex}.file-list-label:hover{color:#3b82f6}.file-list{background:#fff;border:1px solid #e2e8f0;border-radius:8px;max-height:200px;overflow-y:auto}.file-item{cursor:pointer;color:#2d3748;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-bottom:1px solid #f0f4ff;justify-content:space-between;align-items:center;padding:10px 15px;font-size:13px;transition:all .2s;display:flex}.file-item:last-child{border-bottom:none}.file-item:hover{color:#3b82f6;background:#f0f9ff}.file-item.active{color:#2563eb;background:#e0f2fe;border-left:3px solid #3b82f6}.delete-file-btn{color:#fff;cursor:pointer;pointer-events:auto;background:#ff4d4f;border:none;border-radius:4px;padding:4px 8px;font-size:11px;transition:background .2s}.delete-file-btn:hover{background:#ff7875}.delete-file-btn.confirm{background:#dc2626;font-weight:600}.copy-temp{opacity:0;z-index:-1;position:absolute;top:0;left:-9999px}.toast{color:#fff;opacity:0;pointer-events:none;z-index:9999;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:500;transition:all .3s;position:fixed;top:20px;left:50%;transform:translate(-50%)translateY(-100px);box-shadow:0 4px 16px #00000026}.toast.active{opacity:1;transform:translate(-50%)translateY(0)}.toast.success{background:#10b981}.toast.error{background:#ef4444}.toast.info{background:#3b82f6}.qrcode-modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;opacity:0;pointer-events:none;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;transition:all .3s;display:flex;position:fixed;top:0;left:0}.qrcode-modal-backdrop.active{opacity:1;pointer-events:auto}.qrcode-modal{background:#fff;border-radius:16px;flex-direction:column;align-items:center;gap:12px;width:95%;max-width:320px;padding:20px;display:flex;box-shadow:0 8px 32px #00000026}.qrcode-title{color:#2d3748;text-align:center;font-size:17px;font-weight:600}#qrcodeContainer{border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:100%;max-width:220px;height:auto;padding:8px;display:flex}#qrcodeContainer img{-o-object-fit:contain;object-fit:contain;width:100%;max-width:200px;height:auto}.qrcode-loading{color:#718096;text-align:center;padding:20px 0;font-size:14px}.qrcode-desc{color:#718096;text-align:center;font-size:13px;line-height:1.5}.qrcode-close-btn{color:#2d3748;cursor:pointer;background:#e2e8f0;border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:background .2s}.qrcode-close-btn:hover{background:#cbd5e1}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10001;opacity:0;pointer-events:none;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;transition:all .3s;display:flex;position:fixed;top:0;left:0}.modal-backdrop.active{opacity:1;pointer-events:auto}.modal{background:#fff;border-radius:16px;flex-direction:column;gap:16px;width:95%;max-width:400px;padding:24px;display:flex;box-shadow:0 8px 32px #00000026}.modal-title{color:#2d3748;font-size:18px;font-weight:600}.modal-content{color:#4a5568;font-size:14px;line-height:1.6}.modal-buttons{justify-content:flex-end;gap:12px;margin-top:8px;display:flex}.modal-btn{cursor:pointer;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:500;transition:all .2s}.modal-btn-confirm{color:#fff;background:#3b82f6}.modal-btn-confirm:hover{background:#2563eb;transform:translateY(-1px)}.modal-btn-cancel{color:#2d3748;background:#e2e8f0}.modal-btn-cancel:hover{background:#cbd5e1;transform:translateY(-1px)}