.header{min-height:100px;border-bottom:1px solid #ccc}.title{display:block;font-family:sans-serif;font-size:35px;font-weight:700;text-align:center;padding-top:25px;color:#333}.banner{margin-top:15px}.banner img{width:500px}.container{margin:20px 0;text-align:center}.footer{margin:30px 0 60px 0;text-align:center}.card{width:474px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px;box-shadow:0 1px 3px rgb(0 0 0 / .05);margin-bottom:12px;display:inline-block}.tool_title{font-size:18px;font-weight:800;text-align:left;margin:4px 0 10px 0;color:#111}.tool_desc{font-size:13px;line-height:1.55;text-align:left;color:#444;margin:0 0 12px 0}.form_row{display:flex;gap:10px;align-items:normal;justify-content:space-between;margin:10px 0}.form_col{flex:1;text-align:left}.label_text{display:block;font-size:12px;font-weight:700;color:#333;margin:0 0 6px 0}.select_box,.text_box{width:100%;box-sizing:border-box;border:1px solid #d7dbe0;border-radius:10px;padding:10px 12px;background:#fff;font-size:14px;outline:none}.select_box:focus,.text_box:focus{border-color:#9aa7ff;box-shadow:0 0 0 3px rgb(65 105 225 / .12)}.small_hint{font-size:12px;color:#666;margin:6px 0 0 0}.btn_row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}.btn_primary{border:1px solid #3b5bff;background:#3b5bff;color:#fff}.btn_primary:hover{background:#2f4de6}.btn_danger{border:1px solid #e5e7eb;background:#fff;color:#b42318}.btn_danger:hover{background:#fff1f0}.drop_zone{border:2px dashed #d7dbe0;border-radius:12px;padding:14px;background:#fff;text-align:left}.drop_zone.drag_on{border-color:#3b5bff;background:rgb(59 91 255 / .05)}.drop_title{font-weight:800;font-size:13px;color:#111;margin:0 0 4px 0}.drop_sub{font-size:12px;color:#555;margin:0}.file_btn{display:inline-flex;align-items:center;gap:8px;margin-top:10px}.frame_list{margin-top:12px;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;max-height:260px;overflow:auto}.frame_item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #f1f3f5}.frame_item:last-child{border-bottom:none}.thumb{width:48px;height:48px;border-radius:10px;border:1px solid #e5e7eb;object-fit:cover;background:#f3f4f6}.frame_meta{flex:1;min-width:0;text-align:left}.frame_name{font-size:12px;font-weight:800;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.frame_info{font-size:11px;color:#666;margin-top:2px}.frame_controls{display:flex;align-items:center;gap:8px}.mini_input{width:88px;border:1px solid #d7dbe0;border-radius:10px;padding:8px 10px;font-size:12px;outline:none}.mini_input:focus{border-color:#9aa7ff;box-shadow:0 0 0 3px rgb(65 105 225 / .12)}.mini_btn{padding:8px 10px;border-radius:10px;border:1px solid #ddd;background:#fff;cursor:pointer;font-size:12px;margin-top:0}.mini_btn:hover{background:#f0f0f0}.drag_handle{cursor:grab;font-size:14px;user-select:none}.output_box{width:100%;box-sizing:border-box;border:1px solid #d7dbe0;border-radius:12px;padding:12px;background:#fbfbfd}.preview_row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.preview_area{text-align:left}.preview_title{font-size:13px;font-weight:800;margin:0 0 8px 0;color:#111}.preview_img{max-width:100%;border-radius:12px;border:1px solid #e5e7eb;background:#fff}.progress_wrap{margin-top:10px;text-align:left}.progress_bar{width:100%;height:10px;border-radius:999px;background:#e5e7eb;overflow:hidden}.progress_fill{height:10px;width:0%}.status_line{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:#333}.badge{display:inline-block;font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#fff}.badge_ok{border-color:rgb(34 197 94 / .35);background:rgb(34 197 94 / .08);color:#14532d}.badge_warn{border-color:rgb(234 179 8 / .35);background:rgb(234 179 8 / .10);color:#713f12}.hr_line{height:1px;background:#e5e7eb;margin:14px 0}body{max-width:500px;margin:auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f8f9fa;color:#222}a{text-decoration:none;color:inherit}h3{display:inline-block;color:royalblue;font-weight:700;font-size:16px}button{margin-top:14px;padding:10px 14px;border-radius:10px;border:1px solid #ddd;background:#fff;cursor:pointer}button:hover{background:#f0f0f0}@media (max-width:768px){.header{min-height:75px;border-bottom:1px solid #ccc}.title{display:block;font-family:sans-serif;font-size:28px;font-weight:700;text-align:center;padding-top:20px;color:#333}.banner{margin-top:15px;text-align:center;display:block}.banner img{width:96%}.container{margin-bottom:10px;text-align:center}.footer{margin:30px 0 60px 0;text-align:center}.card{width:89%;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px;box-shadow:0 1px 3px rgb(0 0 0 / .05);margin-bottom:12px;display:inline-block}.form_row{flex-direction:column;align-items:stretch}.btn_row{justify-content:stretch}.btn_row button{flex:1}.frame_controls{flex-wrap:wrap;justify-content:flex-end}body{max-width:500px;margin:auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f8f9fa;color:#222}a{text-decoration:none;color:inherit}h3{display:inline-block;color:royalblue;font-weight:700;font-size:16px}button{margin-top:14px;padding:10px 14px;border-radius:10px;border:1px solid #ddd;background:#fff;cursor:pointer}button:hover{background:#f0f0f0}}@media (min-width:768px) and (max-width:1024px){.header{min-height:100px;border-bottom:1px solid #ccc}.title{display:block;font-family:sans-serif;font-size:35px;font-weight:700;text-align:center;padding-top:25px;color:#333}.banner{margin-top:30px;text-align:center;display:block}.banner img{width:500px}.container{margin:20px 0;text-align:center}.footer{margin:30px 0 60px 0;text-align:center}.card{width:474px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px;box-shadow:0 1px 3px rgb(0 0 0 / .05);margin-bottom:12px;display:inline-block}body{max-width:500px;margin:auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f8f9fa;color:#222}a{text-decoration:none;color:inherit}h3{display:inline-block;color:royalblue;font-weight:700;font-size:16px}button{margin-top:14px;padding:10px 14px;border-radius:10px;border:1px solid #ddd;background:#fff;cursor:pointer}button:hover{background:#f0f0f0}}