/**
 * SuperSign Pro - iOS 描述文件签名工具样式表
 * By：逸雨网络
 * QQ: 204325164
 * 不会写代码就去学 你审查元素你妈个臭b呢。垃圾东西 偷代码你全家死光光
 */

/* ==================== 全局样式重置 ==================== */
* { 
    box-sizing: border-box;                     /* 盒模型统一为 border-box */
    -webkit-tap-highlight-color: transparent;   /* 移除移动端点击高亮 */
}

/* ==================== CSS 变量定义 ==================== */
:root {
    --primary: #007AFF;                                              /* 主色调 - iOS 蓝 */
    --primary-gradient: linear-gradient(135deg, #007AFF, #00C6FF);  /* 主渐变色 */
    --success-gradient: linear-gradient(135deg, #34C759, #30D158);  /* 成功渐变色 */
    --surface: rgba(255, 255, 255, 0.75);                           /* 表面颜色 - 半透明白 */
    --radius-m: 16px;                                                /* 中等圆角半径 */
}

/* ==================== 页面主体样式 ==================== */
body {
    margin: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;  /* 苹果系统字体 */
    background-color: #f5f5f7;
    /* 双重径向渐变背景效果 */
    background-image: radial-gradient(at 0% 0%, hsla(213,82%,84%,1) 0, transparent 50%), 
                      radial-gradient(at 100% 0%, hsla(200,80%,85%,1) 0, transparent 50%);
    min-height: 100vh;          /* 最小高度为视口高度 */
    display: flex;              /* Flex 布局 */
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
    color: #1d1d1f;            /* 文字颜色 */
    padding: 20px;             /* 内边距 */
}

/* ==================== 毛玻璃面板容器 ==================== */
.glass-panel {
    width: 100%; 
    max-width: 520px;                   /* 最大宽度限制 */
    background: var(--surface);         /* 半透明白色背景 */
    /* 毛玻璃效果 - 饱和度增强 + 模糊 */
    backdrop-filter: saturate(180%) blur(25px); 
    -webkit-backdrop-filter: saturate(180%) blur(25px);  /* Safari 兼容 */
    border: 1px solid rgba(255,255,255,0.4);             /* 半透明白色边框 */
    border-radius: 24px;                                  /* 大圆角 */
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);            /* 柔和阴影 */
    padding: 30px;
    position: relative; 
    transition: all 0.4s ease;  /* 平滑过渡动画 */
}

/* ==================== 头部标题区域 ==================== */
.header { 
    text-align: center; 
    margin-bottom: 25px; 
}
.header h1 { 
    font-size: 24px; 
    margin: 0 0 5px 0; 
    font-weight: 700;           /* 粗体 */
    letter-spacing: -0.5px;     /* 字间距微调 */
}
.header p { 
    color: #86868b;             /* 灰色副标题 */
    font-size: 13px; 
    margin: 0; 
}

/* ==================== 分段控制器 ==================== */
.segmented-control {
    display: flex; 
    background: rgba(118, 118, 128, 0.12);  /* 半透明灰色背景 */
    padding: 2px; 
    border-radius: 9px; 
    margin-bottom: 20px;
}

/* 分段按钮 */
.segment-btn {
    flex: 1;                    /* 平均分配空间 */
    text-align: center; 
    padding: 7px; 
    font-size: 13px; 
    font-weight: 500;
    border-radius: 7px; 
    cursor: pointer;            /* 鼠标指针 */
    color: #1d1d1f; 
    transition: all 0.2s;       /* 平滑过渡 */
}

/* 激活状态的分段按钮 */
.segment-btn.active {
    background: #fff;                           /* 白色背景 */
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);    /* 阴影突出 */
    font-weight: 600;                           /* 加粗 */
}

/* ==================== 文件列表布局 ==================== */
.file-list { 
    display: flex; 
    flex-direction: column;     /* 垂直排列 */
    gap: 12px;                  /* 项目间距 */
    margin-bottom: 25px; 
}

/* 文件项容器 */
.file-item {
    background: rgba(255, 255, 255, 0.6);   /* 半透明白色背景 */
    border-radius: var(--radius-m);         /* 圆角 */
    padding: 14px;
    display: flex;                          /* Flex 布局 */
    align-items: center;                    /* 垂直居中 */
    cursor: pointer;                        /* 鼠标指针 */
    position: relative; 
    overflow: hidden;                       /* 隐藏溢出 */
    transition: transform 0.2s, background-color 0.2s;  /* 过渡动画 */
}

/* 文件项点击效果 */
.file-item:active { 
    transform: scale(0.98);                     /* 轻微缩小 */
    background-color: rgba(255,255,255,0.8);    /* 背景变亮 */
}

/* ==================== 图标盒子 ==================== */
.icon-box {
    width: 42px; 
    height: 42px; 
    border-radius: 10px;                    /* 圆角 */
    display: flex;                          /* Flex 布局 */
    align-items: center;                    /* 垂直居中 */
    justify-content: center;                /* 水平居中 */
    color: white;                           /* 白色图标 */
    font-size: 18px; 
    margin-right: 15px;                     /* 右侧间距 */
    flex-shrink: 0;                         /* 不缩小 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 轻微阴影 */
}

/* ==================== 图标颜色定义 ==================== */
.bg-blue { background: linear-gradient(135deg, #007AFF, #5AC8FA); }    /* 蓝色渐变 */
.bg-orange { background: linear-gradient(135deg, #FF9500, #FFD60A); }  /* 橙色渐变 */
.bg-purple { background: linear-gradient(135deg, #AF52DE, #DA8FFF); }  /* 紫色渐变 */
.bg-green { background: linear-gradient(135deg, #34C759, #30D158); }   /* 绿色渐变 */
.bg-red { background: linear-gradient(135deg, #FF3B30, #FF685F); }     /* 红色渐变 */

/* ==================== 文件信息区域 ==================== */
.file-info { 
    flex: 1;                        /* 占据剩余空间 */
    min-width: 0;                   /* 允许收缩 */
    display: flex;                  /* Flex 布局 */
    flex-direction: column;         /* 垂直排列 */
    justify-content: center;        /* 垂直居中 */
}

/* 文件标题 */
.file-title { 
    font-size: 15px; 
    font-weight: 600;               /* 半粗体 */
    margin-bottom: 4px;             /* 标题和描述之间的间距 */
    color: #1d1d1f;                /* 深色文字 */
    display: block;
}

/* 文件描述 */
.file-desc { 
    font-size: 12px; 
    color: #86868b;                 /* 灰色文字 */
    white-space: nowrap;            /* 不换行 */
    overflow: hidden;               /* 隐藏溢出 */
    text-overflow: ellipsis;        /* 省略号 */
    display: block;
    opacity: 0.8;                   /* 半透明 */
}

/* ==================== 状态图标 ==================== */
.status-icon { 
    color: #C7C7CC;                 /* 默认灰色 */
    font-size: 18px; 
    margin-left: 10px; 
}

/* 已上传状态的图标 */
.file-item.uploaded .status-icon { 
    color: #34C759;                 /* 绿色 - 表示成功 */
}

/* ==================== 密码输入框组 ==================== */
.password-input-group {
    background: rgba(255, 255, 255, 0.6);   /* 半透明白色背景 */
    border-radius: var(--radius-m);         /* 圆角 */
    padding: 14px;
    display: flex;                          /* Flex 布局 */
    align-items: center;                    /* 垂直居中 */
    margin-bottom: 12px;
}

/* 密码输入框 */
.password-input-group input {
    border: none;                   /* 无边框 */
    background: transparent;        /* 透明背景 */
    outline: none;                  /* 无轮廓 */
    flex: 1;                        /* 占据剩余空间 */
    font-size: 14px; 
    padding: 5px; 
    color: #1d1d1f;                /* 深色文字 */
}

/* ==================== 主按钮 ==================== */
.btn-main {
    width: 100%;                                /* 全宽 */
    padding: 16px; 
    border: none;                               /* 无边框 */
    border-radius: var(--radius-m);            /* 圆角 */
    background: var(--primary-gradient);        /* 渐变背景 */
    color: white;                               /* 白色文字 */
    font-size: 16px; 
    font-weight: 600;                           /* 半粗体 */
    cursor: pointer;                            /* 鼠标指针 */
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);  /* 蓝色阴影 */
    transition: 0.3s;                           /* 平滑过渡 */
    text-decoration: none;                      /* 无下划线 */
    display: flex;                              /* Flex 布局 */
    justify-content: center;                    /* 水平居中 */
    align-items: center;                        /* 垂直居中 */
}

/* 禁用状态的按钮 */
.btn-main.disabled { 
    opacity: 0.5;                   /* 半透明 */
    pointer-events: none;           /* 禁用点击 */
    filter: grayscale(0.5);         /* 灰度滤镜 */
}

/* 按钮点击效果 */
.btn-main:active { 
    transform: scale(0.98);         /* 轻微缩小 */
}

/* ==================== 模式切换区域 ==================== */
.mode-group { 
    display: none;                  /* 默认隐藏 */
}

/* 激活状态的模式组 */
.mode-group.active { 
    display: block;                 /* 显示 */
    animation: fadeIn 0.3s ease;    /* 淡入动画 */
}

/* 淡入动画定义 */
@keyframes fadeIn { 
    from { 
        opacity: 0;                     /* 从透明开始 */
        transform: translateY(5px);     /* 从下方5px开始 */
    } 
    to { 
        opacity: 1;                     /* 到完全不透明 */
        transform: translateY(0);       /* 到原位置 */
    } 
}

/* 隐藏文件输入框 */
input[type="file"] { 
    display: none;                  /* 完全隐藏 */
}

/* ==================== 结果页面 ==================== */
#result-area { 
    display: none;                  /* 默认隐藏 */
    text-align: center;             /* 文字居中 */
    padding: 30px 0 10px 0; 
}

/* 成功图标 */
.success-icon { 
    width: 70px; 
    height: 70px; 
    background: var(--success-gradient);            /* 绿色渐变背景 */
    border-radius: 50%;                             /* 圆形 */
    color: white;                                   /* 白色图标 */
    font-size: 32px; 
    display: flex;                                  /* Flex 布局 */
    align-items: center;                            /* 垂直居中 */
    justify-content: center;                        /* 水平居中 */
    margin: 0 auto 20px;                            /* 水平居中 + 下边距 */
    box-shadow: 0 10px 20px rgba(52, 199, 89, 0.3);  /* 绿色阴影 */
}