/* ============================================
   基础布局及公共组件
   ============================================ */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #f7f8fa;
    color: #333;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    flex-grow: 1;
    padding-bottom: 80px;
}

.page-header {
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.page-header-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.page-header-back {
    position: absolute;
    left: 16px;
    color: #E64377;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}

.page-header-back:hover {
    opacity: 0.8;
}

.page-header-back i {
    margin-right: 4px;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    background-color: #fff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    box-shadow: 0 -1px 5px rgba(0,0,0,0.05);
    z-index: 100;
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888;
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}

.bottom-nav-item.active {
    color: #E64377;
    font-weight: 600;
}

.bottom-nav-item i {
    margin-bottom: 2px;
    font-size: 20px;
    line-height: 1;
}

/* ============================================
   全局样式 - 日期时间选择器
   ============================================ */

/* 选择器遮罩层 */
.datetime-picker-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 选择器面板 */
.datetime-picker-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    z-index: 9999;
    display: none;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    max-height: 70vh;
    overflow: hidden;
}

.datetime-picker-panel.show {
    transform: translateY(0);
}

/* 选择器头部 */
.datetime-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    background: #f7f7f7;
}

.datetime-picker-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.datetime-picker-btn {
    background: none;
    border: none;
    font-size: 15px;
    color: #1989fa;
    padding: 4px 12px;
    cursor: pointer;
}

.datetime-picker-btn:active {
    opacity: 0.7;
}

/* 滚轮容器 */
.datetime-picker-wheels {
    display: flex;
    padding: 20px 0;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.datetime-picker-column {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 200px;
}

.datetime-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.datetime-picker-item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    color: #666;
    transition: all 0.2s;
}

.datetime-picker-item.selected {
    color: #E64377;
    background-color: #fff0f5;
    font-weight: 600;
    font-size: 16px;
}



.datetime-picker-column::before {
    top: 80px;
}

.datetime-picker-column::after {
    bottom: 80px;
    background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.6));
}

/* ============================================
   短信页面 (sms.html) 样式
   ============================================ */

/* 表单卡片 */
.form-card {
    background-color: #fff;
    margin: 16px;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    box-sizing: border-box;
    overflow: hidden;
}

/* 输入框组 */
.input-group {
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}
.input-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
}
.input-box {
    width: 100%;
    box-sizing: border-box;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 12px 16px;
    font-size: 15px;
    outline: none;
    transition: all 0.2s;
}
.input-box:focus {
    background-color: #fff;
    border-color: #E64377;
    box-shadow: 0 0 0 3px rgba(230, 67, 119, 0.1);
}

/* 文本域容器 */
.textarea-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.content-textarea {
    width: 100%;
    box-sizing: border-box;
    height: 140px;
    resize: none;
    line-height: 1.5;
}
.char-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 12px;
    color: #999;
}

.price-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}

.price-meta strong {
    color: #E64377;
    font-size: 13px;
}

.pricing-hint {
    background-color: #fff7fb;
    border: 1px dashed #f9b5cc;
    color: #c6577c;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-top: 10px;
    line-height: 1.4;
}

/* 日期选择器样式优化 */
.date-input-wrapper {
    position: relative;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}
.date-input-wrapper input[type="hidden"] {
    display: none;
}
.date-input-display {
    width: 100%;
    box-sizing: border-box;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 12px 16px 12px 44px;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: all 0.2s;
    cursor: pointer;
    min-height: 48px;
    display: flex;
    align-items: center;
}
.date-input-display:active {
    background-color: #fff;
    border-color: #E64377;
    box-shadow: 0 0 0 3px rgba(230, 67, 119, 0.1);
}
.date-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #E64377;
    pointer-events: none;
    z-index: 1;
}
.date-display {
    pointer-events: none;
    font-size: 15px;
    color: #999;
}
.date-display.has-value {
    color: #333;
}

/* 快捷标签 */
.quick-tags {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-top: 8px;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.quick-tags::-webkit-scrollbar {
    display: none;
}
.tag {
    font-size: 12px;
    color: #666;
    background-color: #f0f0f0;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s;
}
.tag:hover {
    background-color: #e0e0e0;
}

/* 选项行 */
.option-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}
.option-row:last-child {
    border-bottom: none;
}
.option-label {
    font-size: 15px;
    color: #333;
    display: flex;
    align-items: center;
}
.option-value {
    font-size: 14px;
    color: #888;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* 开关 */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 26px;
    background-color: #e0e0e0;
    border-radius: 13px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}
.toggle-switch.active {
    background-color: #E64377;
}
.toggle-switch.active::after {
    transform: translateX(18px);
}

/* 底部操作栏 */
.bottom-action-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    background-color: #fff;
    padding: 12px 16px 24px 16px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 50;
}
.price-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: #666;
}
.price-highlight {
    color: #E64377;
    font-weight: 700;
    font-size: 16px;
}
.submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff7eb3 0%, #E64377 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 14px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(230, 67, 119, 0.3);
    transition: transform 0.1s, box-shadow 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.submit-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(230, 67, 119, 0.3);
}

/* ============================================
   人工传话页面 (message.html) 样式
   ============================================ */

/* 组合输入框样式 */
.input-group-wrapper {
    display: flex;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f9f9f9;
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.input-group-wrapper:focus-within {
    background-color: #fff;
    border-color: #9333EA;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

/* 左侧选择框 */
.platform-select {
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    font-size: 15px;
    padding: 12px 8px 12px 12px;
    color: #333;
    font-weight: 500;
    outline: none;
    border-right: 1px solid #eee;
    min-width: 90px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 24px;
}

/* 右侧输入框 */
.account-input {
    flex: 1;
    box-sizing: border-box;
    min-width: 0;
    background-color: transparent;
    border: none;
    padding: 12px 16px;
    font-size: 15px;
    outline: none;
    color: #333;
}

/* 通用输入框 */
.simple-input {
    width: 100%;
    box-sizing: border-box;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    outline: none;
    transition: all 0.2s;
}
.simple-input:focus {
    background-color: #fff;
    border-color: #9333EA;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

/* 选择器样式（使用 simple-input 类时） */
.simple-input[type="select"],
select.simple-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f9f9f9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 44px;
    cursor: pointer;
    font-weight: 500;
    color: #333;
    transition: all 0.2s ease;
}

select.simple-input:hover {
    background-color: #f5f5f5;
    border-color: #ddd;
}

select.simple-input:focus {
    background-color: #fff;
    border-color: #9333EA;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239333EA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

select.simple-input option {
    padding: 12px;
    background-color: #fff;
    color: #333;
}

/* 人工传话页面的日期选择器样式 */
.message-page .date-input-display:active {
    border-color: #9333EA;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}
.message-page .date-input-icon {
    color: #9333EA;
}

.price-tip {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}
.message-page .price-highlight {
    color: #9333EA;
    font-weight: 600;
    font-size: 14px;
}
.message-page .submit-btn {
    background: linear-gradient(135deg, #b76bf5 0%, #9333EA 100%);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}
.message-page .submit-btn:active {
    box-shadow: 0 2px 6px rgba(147, 51, 234, 0.3);
}

/* ============================================
   首页 (index.html) 样式
   ============================================ */

/* 首页顶部 Banner 区域 */
.home-banner {
    background: linear-gradient(135deg, #ffeef1 0%, #ffffff 100%);
    padding: 40px 24px 60px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.app-title {
    font-size: 28px;
    font-weight: 800;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.app-title span {
    color: #E64377;
}

.app-subtitle {
    font-size: 14px;
    color: #888;
    max-width: 80%;
}

/* 功能卡片通用样式 */
.feature-card {
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 67, 119, 0.1);
    border-color: rgba(230, 67, 119, 0.1);
}

.card-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    flex-shrink: 0;
}

.card-content {
    flex: 1;
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.card-desc {
    font-size: 13px;
    color: #999;
    line-height: 1.4;
}

.action-btn {
    background-color: #f7f8fa;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    transition: all 0.2s;
}

.feature-card:hover .action-btn {
    background-color: #E64377;
    color: white;
}

/* 特定卡片颜色定义 */
.card-sms .card-icon-wrapper {
    background-color: #fff0f5;
    color: #E64377;
}
.card-call .card-icon-wrapper {
    background-color: #eef6ff;
    color: #007AFF;
}
.card-manual .card-icon-wrapper {
    background-color: #f8f0ff;
    color: #9C27B0;
}

/* 快捷通知栏 */
.notice-bar {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 16px 20px 16px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    position: relative;
    top: -30px;
    overflow: hidden;
}
.notice-tag {
    background-color: #E64377;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
    font-weight: bold;
    flex-shrink: 0;
}
.notice-content {
    flex: 1;
    position: relative;
    height: 20px;
    overflow: hidden;
}
.notice-scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
}
.notice-item {
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   我的页面 (user.html) 样式
   ============================================ */

/* 顶部背景图/渐变区 */
.profile-bg {
    background: linear-gradient(to bottom right, #ffeef1, #fff);
    padding-top: 20px;
    padding-bottom: 40px;
}

/* 个人信息区域 */
.user-info-row {
    padding: 0 20px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid #FFFFFF;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    object-fit: cover;
}

.user-text {
    margin-left: 16px;
    flex: 1;
}

.nickname {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.user-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #E64377;
    background-color: rgba(230, 67, 119, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

/* 数据概览条 */
.stats-row {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin-top: 10px;
    padding: 0 10px;
}
.stat-item {
    flex: 1;
    cursor: pointer;
}
.stat-num {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}
.stat-label {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

/* 通用卡片样式 */
.content-card {
    background-color: #FFFFFF;
    border-radius: 16px;
    margin: 12px 16px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    overflow: hidden;
}

/* 宫格菜单 */
.grid-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 8px;
}
.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.1s;
}
.grid-item:active {
    transform: scale(0.95);
}
.grid-icon-box {
    width: 44px;
    height: 44px;
    background-color: #f9f9f9;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    color: #555;
    transition: background-color 0.2s, color 0.2s;
}
.grid-item:hover .grid-icon-box {
    background-color: #fff0f5;
    color: #E64377;
}
.grid-label {
    font-size: 12px;
    color: #555;
    text-align: center;
}

/* 列表菜单 */
.list-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
}
.list-menu-item:last-child {
    border-bottom: none;
}
.list-left {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #333;
    font-weight: 500;
}
.list-left i {
    margin-right: 12px;
    color: #333;
    width: 20px;
    height: 20px;
}
.list-right {
    color: #ccc;
}

/* Vip Banner */
.vip-banner {
    background: linear-gradient(90deg, #333, #555);
    border-radius: 12px;
    margin: 0 16px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFD700;
    margin-bottom: -20px;
    position: relative;
    z-index: 1;
}

.authorize-btn {
    border: none;
    background: linear-gradient(135deg, #ff9ec4 0%, #E64377 100%);
    color: #fff;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(230, 67, 119, 0.3);
}

.copy-openid-btn {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(230, 67, 119, 0.3);
    background-color: transparent;
    color: #E64377;
    font-size: 11px;
    cursor: pointer;
}

/* ============================================
   电话页面 (call.html) 样式
   ============================================ */

/* 标题标签 */
.section-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

/* 号码输入框 */
.phone-input-wrapper {
    position: relative;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}
.phone-input {
    width: 100%;
    box-sizing: border-box;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 16px 16px 16px 50px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1px;
    outline: none;
    transition: all 0.2s;
    color: #333;
}
.phone-input:focus {
    background-color: #fff;
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}
.phone-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #007AFF;
}

.call-btn {
    width: 100%;
    background: linear-gradient(135deg, #3b82f6 0%, #007AFF 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 14px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    transition: transform 0.1s, box-shadow 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.call-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
}
.call-page .price-tip span {
    color: #E64377;
    font-weight: 600;
}

/* ============================================
   公开信页面 (inbox.html) 样式
   ============================================ */

/* 公开信卡片样式 */
.letter-card {
    background-color: #FFFFFF;
    border-radius: 16px;
    margin: 0 16px 16px 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}

.letter-content {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 12px;
    word-wrap: break-word;
}

.letter-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #999;
    padding-top: 12px;
    border-top: 1px solid #f5f5f5;
}

.letter-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-state p {
    font-size: 14px;
    margin: 0;
}

/* ============================================
   发信记录页面 (record.html) 样式
   ============================================ */

/* 记录卡片样式 */
.record-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    margin: 0 16px 12px 16px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.1s;
}
.record-card:active {
    transform: scale(0.99);
}

.record-status {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    display: inline-block;
}

/* 状态颜色 */
.status-sent {
    color: #007AFF;
    background-color: #E5F1FF;
}
.status-read {
    color: #34C759;
    background-color: #E6F8E8;
}
.status-failed {
    color: #FF3B30;
    background-color: #FFE6E6;
}
.status-processing {
    color: #FF9500;
    background-color: #FFF3E5;
}
/* ============================================
   Tailwind CSS 工具类替代样式
   ============================================ */

/* 尺寸工具类 */
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-12 { width: 3rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-12 { height: 3rem; }

/* 文本大小 */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }

/* 文本颜色 */
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-purple-500 { color: #a855f7; }
.text-purple-600 { color: #9333ea; }
.text-purple-700 { color: #7e22ce; }
.text-pink-500 { color: #ec4899; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.text-green-500 { color: #10b981; }
.text-orange-500 { color: #f97316; }
.text-red-500 { color: #ef4444; }

/* 背景颜色 */
.bg-purple-50 { background-color: #faf5ff; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-yellow-400 { background-color: #facc15; }

/* 边框颜色 */
.border-purple-100 { border-color: #f3e8ff; }
.border-blue-100 { border-color: #dbeafe; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }

/* 圆角 */
.rounded-xl { border-radius: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* 内边距 */
.p-3 { padding: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.pl-10 { padding-left: 2.5rem; }

/* 外边距 */
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-24 { margin-bottom: 6rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }

/* Flexbox */
.flex { display: flex; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }

/* 定位 */
.relative { position: relative; }
.absolute { position: absolute; }
.left-3 { left: 0.75rem; }
.right-3 { right: 0.75rem; }
.right-4 { right: 1rem; }
.top-3 { top: 0.75rem; }
.top-1\/2 { top: 50%; }

/* 变换 */
.transform { transform: translateZ(0); }
.-translate-y-1\/2 { transform: translateY(-50%); }

/* 其他 */
.inline-block { display: inline-block; }
.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.leading-relaxed { line-height: 1.625; }
.leading-tight { line-height: 1.25; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.tracking-widest { letter-spacing: 0.1em; }
.uppercase { text-transform: uppercase; }
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.opacity-50 { opacity: 0.5; }
.text-center { text-align: center; }
.text-black { color: #000; }
.fill-current { fill: currentColor; }

/* Hover 状态 */
.hover\:bg-gray-50:hover { background-color: #f9fafb; }

/* Focus 状态 */
.focus\:ring-purple-500:focus { outline: 2px solid #a855f7; outline-offset: 2px; }
.focus\:ring-pink-500:focus { outline: 2px solid #ec4899; outline-offset: 2px; }
.focus\:ring-blue-500:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* 全局 box-sizing 修复 */
* {
    box-sizing: border-box;
}

input, textarea, select {
    box-sizing: border-box;
    max-width: 100%;
}