/* ========== 基础重置 + 自适应 ========== */
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,Inter,sans-serif}
html{font-size:16px}
body{background:#121826;color:#fff;line-height:1.6;min-width:320px;overflow-x:hidden}

/* 容器 */
.container{max-width:920px;margin:0 auto;padding:clamp(12px, 3vw, 30px)}

.footer{text-align:center;margin:0 auto;margin-top:clamp(50px, 10vw, 120px);color:#64749c;padding-bottom:30px;font-size:clamp(12px, 2vw, 15px

/* 标题 */
h1,h2,h3{font-weight:600}
h1{font-size:clamp(22px, 5vw, 36px);margin-bottom:clamp(12px, 3vw, 24px)}

/* 表单元素 */
input,textarea,select,button{
    width:100%;
    padding:clamp(10px, 2.5vw, 14px);
    border:none;
    border-radius:8px;
    font-size:clamp(14px, 2.5vw, 16px);
    margin-bottom:clamp(10px, 2vw, 16px);
}
input,textarea,select{background:#2d3750;color:#fff}
textarea{min-height:clamp(80px, 15vw, 120px);resize:none}
button{background:#2196f3;color:#fff;cursor:pointer;font-weight:500;transition:opacity .2s}
button:hover{opacity:.9}

/* 按钮组 */
.btn-group{display:flex;gap:clamp(8px, 2vw, 12px);flex-wrap:wrap}
.btn-group .btn{flex:1;min-width:120px;text-align:center;padding:clamp(10px, 2.5vw, 14px);border-radius:8px;text-decoration:none;font-size:clamp(13px, 2.5vw, 15px)}

/* 结果区域 */
.result-wrap{margin-top:clamp(16px, 4vw, 24px)}
#resultBox{
    width:100%;
    min-height:clamp(200px, 40vw, 500px);
    max-height:70vh;
    padding:clamp(12px, 3vw, 20px);
    background:#273149;
    border-radius:8px;
    overflow-y:auto;
    font-size:clamp(13px, 2.5vw, 15px)
}

/* 加载提示 */
.load-tip{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:rgba(0,0,0,.85);
    padding:clamp(16px, 4vw, 24px) clamp(20px, 5vw, 32px);
    border-radius:10px;
    font-size:clamp(14px, 3vw, 18px);
    z-index:9999;
    display:none;
    white-space:nowrap
}

/* 顶部栏 */
.top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:clamp(10px, 2.5vw, 16px);
    font-size:clamp(13px, 2.5vw, 15px)
}

/* 操作按钮 */
.operate-btn a{
    display:inline-block;
    padding:clamp(6px, 1.5vw, 10px) clamp(10px, 2.5vw, 16px);
    border-radius:6px;
    text-decoration:none;
    color:#fff;
    font-size:clamp(12px, 2.5vw, 14px);
    margin:2px
}

/* 提示文字 */
.tip{color:#ffdd70;margin:clamp(8px, 2vw, 12px) 0;font-size:clamp(13px, 2.5vw, 16px)}

/* 下载链接 */
.down-link{
    display:inline-block;
    padding:clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 14px);
    background:#009688;
    color:#fff;
    border-radius:6px;
    text-decoration:none;
    font-size:clamp(12px, 2.5vw, 14px)
}

/* 文件上传 */
input[type="file"]{
    padding:clamp(8px, 2vw, 12px);
    background:#2d3750;
    cursor:pointer
}

/* ========== 手机端适配 (<= 768px) ========== */
@media (max-width:768px){
    .container{padding:12px}
    .btn-group{flex-direction:column}
    .btn-group .btn{width:100%;margin-bottom:8px}
    .top-bar{flex-direction:column;align-items:flex-start}
    .operate-btn{width:100%;display:flex;flex-wrap:wrap;gap:6px}
    .operate-btn a{flex:1;min-width:80px;text-align:center;margin:0}
    h1{font-size:24px;text-align:center}
    .result-head{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ========== 超小屏幕 (<= 480px) ========== */
@media (max-width:480px){
    html{font-size:14px}
    .container{padding:10px}
    input,textarea,select,button{padding:12px;font-size:14px}
    .load-tip{padding:14px 20px;font-size:14px}
    .operate-btn a{padding:8px 12px;font-size:13px}
}