/* CSS样式开始 */
/* [核心改动] 字体路径已更新，指向顶层的 /fonts/ 目录 */
@font-face {
    font-family: 'PingFang';
    src: url('./fonts/PingFangSC-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'AlipayNumber';
    src: url('./fonts/AlipayNumber.ttf') format('truetype');
}

:root {
    --theme-color: #007BFF; --bg-color: #f4f6f9; --container-bg: #ffffff;
    --text-color: #333; --border-color: #dee2e6; --success-color: #28a745;
}
body {
    font-family: 'PingFang', -apple-system, sans-serif;
    margin: 0; padding: 20px; background-color: var(--bg-color);
    display: flex; justify-content: center; align-items: flex-start; gap: 30px; flex-wrap: wrap;
}
.container { background-color: var(--container-bg); padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); }
.controls { width: 400px; }
.preview { width: 380px; text-align: center; }
h1, h2 { text-align: center; color: var(--theme-color); margin-top: 0; font-weight: 600; }
.input-group { margin-bottom: 18px; }
.input-group label { display: block; margin-bottom: 6px; color: var(--text-color); font-weight: 500; font-size: 14px; }
.input-group input[type="text"], .input-group input[type="time"], .input-group select, .input-group textarea {
    width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; box-sizing: border-box; font-size: 16px; font-family: inherit;
}
.input-group input[type="range"] { width: 100%; }
.checkbox-group, .radio-group { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.horizontal-controls-container {
    display: flex;       /* 开启 Flexbox 布局，使内部元素水平排列 */
    flex-wrap: wrap;     /* 允许元素在空间不足时换行 */
    gap: 10px 15px;      /* 设置元素之间的间距 (垂直10px, 水平20px) */
    padding: 5px 0;      /* 添加一点垂直内边距，让观感更好 */
    margin-bottom: 18px; /* 保持与下方元素的间距 */
}
.horizontal-controls-container .checkbox-group {
    margin-bottom: 0;
}
.quick-buttons { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.quick-buttons button { background-color: #e9ecef; color: #495057; border: 1px solid #ced4da; padding: 5px 10px; font-size: 12px; border-radius: 4px; cursor: pointer; width: auto; margin-top: 0; font-weight: normal; box-shadow: none; }
.quick-buttons button:hover { background-color: #d6d8db; }
#download-btn { width: 100%; padding: 12px; background-color: var(--success-color); color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 20px; transition: background-color 0.2s; }
#download-btn:hover { background-color: #218838; }
#canvas { border: 1px solid var(--border-color); width: 100%; height: auto; border-radius: 8px; }
fieldset { border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; margin-bottom: 20px; }
/* `.template-controls` 相关的样式不再需要，因为我们是动态替换内容 */
/* =============================================== */
/*  [新增] 统一输入框样式
/* =============================================== */

/* 针对所有文本类输入框和文本域的基础样式 */
.control[type="text"],
.control[type="time"],
.control[type="datetime-local"],
textarea.control {
    /* 盒模型与尺寸 */
    box-sizing: border-box; /* 确保 padding 不会撑大宽度 */
    width: 100%;
    padding: 10px 12px;
    
    /* 字体与颜色 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    color: #333;
    background-color: #fff;

    /* 边框与圆角 */
    border: 1px solid #ccc;
    border-radius: 6px; /* 圆角大小 */

    /* 其他 */
    -webkit-appearance: none; /* 移除 iOS 上的默认样式 */
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* 当用户点击输入框时，显示一个蓝色的外发光效果，提升体验 */
.control[type="text"]:focus,
.control[type="time"]:focus,
.control[type="datetime-local"]:focus,
textarea.control:focus {
    outline: none; /* 移除默认的蓝色轮廓 */
    border-color: #007bff; /* 将边框变为蓝色 */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* 添加一个柔和的蓝色阴影 */
}

/* 单独微调文件上传按钮，让它不那么宽 */
.control[type="file"] {
    width: auto;
    margin-top: 5px;
}
/* 页面全局页脚样式 */
.page-footer {
    width: 100%; /* 宽度撑满 */
    text-align: center; /* 文字居中 */
    padding: 20px 0; /* 上下留出一些间距 */
    color: #999; /* 文字颜色为灰色 */
    font-size: 14px; /* 字体稍小一些 */
}

.page-footer a {
    color: #007BFF; /* 链接颜色使用主题色 */
    text-decoration: none; /* 去掉下划线 */
}

.page-footer a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* =============================================== */
/*  状态栏图标选择器样式
/* =============================================== */

.statusbar-icon-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px;
    background-color: #c9c9c9; /* 给一个浅灰色背景 */
    border-radius: 8px;
}

.statusbar-icon-selector .icon-option {
    width: 31px;
    height: 31px;
    border-radius: 6px;
    background-size: 60%; /* 默认尺寸，对系统图标很友好 */
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* “关闭”状态：半透明 */
    opacity: 1;
    background-color: #009dff;
}

/* 
  第三方应用图标的覆盖样式 
*/
.statusbar-icon-selector .icon-option.app-icon {
    background-size: 100%; /* 或者使用 cover，让图标完全填满容器 */
    border-radius: 8px;    /* 可以为第三方图标设置一个稍大的圆角，使其看起来更像App图标 */
}

.statusbar-icon-selector .icon-option:hover {
    background-color: #009dff;
    
}

/* “开启”状态：不透明，有高亮背景 */
.statusbar-icon-selector .icon-option.active {
    opacity: 1;
    background-color: var(--theme-color); /* 使用主题蓝色 */
    /* 让白色图标在蓝色背景上可见 */
    /*filter:  #009dff;*/
}

/* 活动行的父容器 */
.is-active-dropzone-container {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    display: flex;
    padding: 8px;
    gap: 4px;
    border-radius: 8px;
}

/* 放置区统一样式 */
.icon-sub-dropzone {
    display: flex;
    flex-wrap: wrap; /* 允许图标换行 */
    gap: 10px;
    min-height: 31px; /* 确保空的时候也有高度和可点击区域 */
    min-width: 350px;  /* 确保空的时候有宽度 */
    padding: 4px;
    border: 2px dashed transparent; /* 默认透明边框 */
    border-radius: 6px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* 可用图标库样式 */
.is-available-dropzone {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    padding: 8px;
    gap: 10px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
}

/* 当有图标拖拽到放置区域上方时，高亮边框作为视觉反馈 */
.icon-sub-dropzone.drag-over,
.is-available-dropzone.drag-over {
    border-color: var(--theme-color);
    background-color: #e7f3ff;
}

/* --- 系统Ios原生图标 --- */
.statusbar-icon-selector .icon-Ioslocat { background-image: url('.../icons/IoslocatIcon.png'); }
.statusbar-icon-selector .icon-Iosalarm    { background-image: url('../icons/IosalarmIcon.png'); }
.statusbar-icon-selector .icon-Iosbell     { background-image: url('../icons/IosBellIcon.png'); }
.statusbar-icon-selector .icon-Iosuser     { background-image: url('../icons/IosuserIcon.png'); }
.statusbar-icon-selector .icon-Iossleep    { background-image: url('../icons/IossleepIcon.png'); }
.statusbar-icon-selector .icon-Ioswifi     { background-image: url('../icons/IosWifiIcon.png'); }
.statusbar-icon-selector .icon-Iosltea      { background-image: url('../icons/IoslteaIcon.png'); }
.statusbar-icon-selector .icon-Ioslteb      { background-image: url('../icons/IosltebIcon.png'); }
.statusbar-icon-selector .icon-Ioslte5Ga      { background-image: url('../icons/Ioslte5GaIcon.png'); }


/* --- 系统原生图标 --- */
.statusbar-icon-selector .icon-chat  { background-image: url('../icons/chatIcon.png'); }
.statusbar-icon-selector .icon-wifia     { background-image: url('../icons/WifiArrowIcon.png'); }
.statusbar-icon-selector .icon-lte4Ga      { background-image: url('../icons/lte4GaIcon.png'); }
.statusbar-icon-selector .icon-lte4Gb      { background-image: url('../icons/lte4GbIcon.png'); }
.statusbar-icon-selector .icon-lte3G      { background-image: url('../icons/lte3GIcon.png'); }
.statusbar-icon-selector .icon-lte5Gb      { background-image: url('../icons/lte5GbIcon.png'); }
.statusbar-icon-selector .icon-Phone      { background-image: url('../icons/PhoneIcon.png'); }
.statusbar-icon-selector .icon-Alipay { background-image: url('../icons/AlipayIcon.png'); }
.statusbar-icon-selector .icon-Taobao { background-image: url('../icons/TaobaoIcon.png'); }
.statusbar-icon-selector .icon-Wechat { background-image: url('../icons/WechatIcon.png'); }
.statusbar-icon-selector .icon-Weibo { background-image: url('../icons/WeiboIcon.png'); }
.statusbar-icon-selector .icon-Zhihu { background-image: url('../icons/ZhihuIcon.png'); }

/* --- 第三方应用图标 --- */
.statusbar-icon-selector .icon-12306 { background-image: url('../icons/radius/12306Icon.png'); }
.statusbar-icon-selector .icon-163music { background-image: url('../icons/radius/163musicIcon.png'); }
.statusbar-icon-selector .icon-alidrive { background-image: url('../icons/radius/AlidriveIcon.png'); }
.statusbar-icon-selector .icon-atuin { background-image: url('../icons/radius/AtuinIcon.png'); }
.statusbar-icon-selector .icon-baidu { background-image: url('../icons/radius/BaiduIcon.png'); }
.statusbar-icon-selector .icon-baidudrivea { background-image: url('../icons/radius/BaidudriveaIcon.png'); }
.statusbar-icon-selector .icon-baidudriveb { background-image: url('../icons/radius/BaidudrivebIcon.png'); }
.statusbar-icon-selector .icon-bilibili { background-image: url('../icons/radius/BilibiliIcon.png'); }
.statusbar-icon-selector .icon-chrome { background-image: url('../icons/radius/ChromeIcon.png'); }
.statusbar-icon-selector .icon-doubao { background-image: url('../icons/radius/DoubaoIcon.png'); }
.statusbar-icon-selector .icon-dsvideo { background-image: url('../icons/radius/DsvideoIcon.png'); }
.statusbar-icon-selector .icon-edge { background-image: url('../icons/radius/EdgeIcon.png'); }
.statusbar-icon-selector .icon-flclash { background-image: url('../icons/radius/FlclashIcon.png'); }
.statusbar-icon-selector .icon-google { background-image: url('../icons/radius/GoogleIcon.png'); }
.statusbar-icon-selector .icon-googlecloud { background-image: url('../icons/radius/GooglecloudIcon.png'); }
.statusbar-icon-selector .icon-googledrive { background-image: url('../icons/radius/GoogledriveIcon.png'); }
.statusbar-icon-selector .icon-googlemap { background-image: url('../icons/radius/GooglemapIcon.png'); }
.statusbar-icon-selector .icon-iptv { background-image: url('../icons/radius/IptvIcon.png'); }
.statusbar-icon-selector .icon-kmplayer { background-image: url('../icons/radius/KmplayerIcon.png'); }
.statusbar-icon-selector .icon-miwifi { background-image: url('../icons/radius/MiwifiIcon.png'); }
.statusbar-icon-selector .icon-office { background-image: url('../icons/radius/OfficeIcon.png'); }
.statusbar-icon-selector .icon-onedev { background-image: url('../icons/radius/OnedevIcon.png'); }
.statusbar-icon-selector .icon-palworld { background-image: url('../icons/radius/PalworldIcon.png'); }


/* =============================================== */
/* 商户头像图片选择器样式
/* =============================================== */

.merchant-icon-selector {
    display: flex; /* Flex 布局，让图片横向排列 */
    gap: 12px; /* 图片之间的间距 */
    flex-wrap: wrap; /* 空间不够时自动换行 */
    padding-top: 5px;
}

.merchant-icon-option {
    width: 50px; /* 图片宽度 */
    height: 50px; /* 图片高度 */
    border-radius: 50%; /* 变为圆形 */
    border: 3px solid transparent; /* 默认透明边框，用于占位 */
    object-fit: cover; /* 确保图片不变形地填充满圆形 */
    cursor: pointer; /* 鼠标悬停时显示小手图标 */
    transition: all 0.2s ease-in-out; /* 平滑过渡效果 */
}

.merchant-icon-option:hover {
    transform: scale(1.1); /* 鼠标悬停时轻微放大 */
}

/* “选中”状态的样式 */
.merchant-icon-option.selected {
    border-color: var(--theme-color); /* 边框变为主题蓝色 */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* 添加外发光效果 */
}

/*
 * 美化文件上传按钮的样式
 */
.button-like-label {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    color: #fff;
    background-color: #dee2e6; /* 一个友好的蓝色，您可以换成您喜欢的主题色 */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
    
}

.button-like-label:hover {
    background-color: #009dff; /* 鼠标悬停时的颜色 */
}

/*
 * 用于显示已选文件名的样式
 */
.file-name-display {
    margin-left: 12px;
    font-size: 14px;
    color: #666;
    /* 防止文件名过长时换行 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* 限制最大宽度 */
    vertical-align: middle; /* 与按钮垂直对齐 */
}