/* 字体声明 */
@font-face {
    font-family: 'SFProTextMedium';
    src: url('/pages/submenu/Bitpie2/餘額/fonts/SF-Pro-Text-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'SFProTextRegular';
    src: url('/pages/submenu/Bitpie2/餘額/fonts/SF-Pro-Text-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'SFProTextLight';
    src: url('/pages/submenu/Bitpie2/餘額/fonts/SF-Pro-Text-Light.otf') format('opentype');
}

@font-face {
    font-family: 'PingFangMedium';
    src: url('/pages/submenu/Bitpie2/餘額/fonts/PingFangMedium.otf') format('opentype');
}

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f5f5f5;
}

.container {
    display: flex;
    gap: 0;
}

/* 预览区域样式 */
.preview-section {
    width: 385px;
    height: 842px;
    background: #f5f5f5;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.wallet-preview {
    width: 385px;
    height: 842px;
    display: flex;
    flex-direction: column;
}

/* 顶部状态栏 */
.wallet-header {
    width: 385px;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f5f5;
    flex-shrink: 0;
}

.time {
    width: 67px;
    height: 22px;
    margin-left: 21px;
    font-family: 'SFProTextMedium';
    font-size: 16px;
    color: #000000;
    line-height: 22px;
}

/* 导航栏 */
.top-nav {
    width: 385px;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #E5E5E5;
}

.back-btn {
    width: 7px;
    height: 12px;
    margin-left: 21px;
}

.title {
    width: 251px;
    height: 21px;
    font-family: 'SFProTextRegular';
    font-size: 16px;
    color: #353638;
    text-align: center;
    line-height: 21px;
}

.add-btn {
    width: 51px;
    height: 19px;
    margin-right: 21px;
    font-family: 'SFProTextRegular';
    font-size: 14px;
    color: #202123;
    text-align: right;
    line-height: 19px;
}

/* 主要内容区域 */
.wallet-content {
    display: flex;
    flex: 1;
    height: 752px;
}

/* 左侧区块 */
.left-sidebar {
    width: 62px;
    height: 752px;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-right: 1px solid #E5E5E5;
}

.sidebar-icon {
    width: 34px;
    height: 132px;
    margin-top: 25px;
}

.sidebar-line {
    width: 2px;
    height: 17px;
    background: #000000;
    position: absolute;
    right: -1px;
    top: 30px;
}

/* 右侧内容区域 */
.right-content {
    width: 323px;
    height: 752px;
    flex-shrink: 0;
    overflow-y: auto;
}

/* 钱包标题 */
.wallet-title {
    width: 297px;
    height: 16px;
    margin: 20px 0px 15px;
    padding-left: 20px;
    font-family: 'SFProTextRegular';
    font-size: 12px;
    color: #000000E6;
    line-height: 16px;
}

/* 钱包列表 */
.wallet-list {
    padding: 0;
}

.wallet-item {
    width: 297.16px;
    height: 69px;
    margin: 0 16px 13px;
    padding: 0 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    position: relative;
}

.wallet-item img {
    width: 40px;
    height: 40px;
    margin-right: 12px;
}

.wallet-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.balance-container {
    position: absolute;
    right: 15px;
    top: 15px;
}

.balance {
    width: 28.91px;
    height: 20px;
    font-family: 'PingFangMedium';
    font-size: 14px;
    color: #FFFDFF;
    line-height: 20px;
    text-align: right;
}

.coin-name {
    height: 22px;
    font-family: 'PingFangMedium';
    font-size: 16px;
    color: #FFFDFF;
    line-height: 22px;
}

.coin-desc {
    width: 215.16px;
    height: 14px;
    margin-top: 4px;
    font-family: 'SFProTextLight';
    font-size: 10px;
    color: #EEECFF;
    line-height: 14px;
}

/* 特定钱包样式 */
.btc {
    background: #6C85C7;
}

.eth {
    background: #4FBED2;
}

.usdt-erc20 {
    background: #4594CF;
}

.usdt-trc20 {
    background: #01C3A9;
}

.trx {
    background: #FFFFFF;
}

.trx .coin-name,
.trx .balance {
    color: #202020;
}

.trx .coin-desc {
    color: #9A9A9A;
}

.bsc {
    background: #FFFFFF;
}

.bsc .coin-name,
.bsc .balance {
    color: #202020;
}

.bsc .coin-desc {
    color: #9A9A9A;
}

/* 状态图标样式 */
.status-icons {
    display: flex;
    gap: 8px;
    margin-right: 21px;
}

/* SIM卡信号图标 */
.signal {
    width: 20px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* WiFi网络图标 */
.wifi {
    width: 18px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 电池图标 */
.battery {
    width: 25px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 选中状态样式 */
.selected-mark {
    position: absolute;
    right: -0px;
    bottom: -0px;
    width: 31px;
    height: 30px;
    background: url('/pages/submenu/Bitpie2/餘額/images/icon-select.png') no-repeat center;
    background-size: contain;
}

/* 编辑区域样式 */
.edit-section-1,
.edit-section-2 {
    width: 500px;
    height: 842px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 特定币种名称宽度 */
.btc .coin-name {
    width: 32.39px;
}

.eth .coin-name {
    width: 31.63px;
}

.usdt-erc20 .coin-name {
    width: 104.28px;
}

.usdt-trc20 .coin-name {
    width: 103.98px;
}

/* 底部黑色实线容器 */
.bottom-line-container {
    position: absolute;
    top: 848px;
    width: 385px;
    height: 34px;
}

/* 底部黑色实线 */
.bottom-line {
    position: absolute;
    left: 124px;
    top: 20px;
    width: 137px;
    height: 5px;
    background: #000000;
}

/* 编辑区一样式 */
.edit-section-1 {
    width: 500px;
    height: 842px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/* 保存图片按钮 */
.save-btn {
    width: 88px;
    height: 32px;
    background: #409EFF;
    color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px 15px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* 时间输入组 */
.time-input-group {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-input {
    width: 100px;
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 10px;
}

.get-time-btn {
    height: 32px;
    padding: 0 15px;
    background: #409EFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 编辑区代币设置 */
.coin-settings {
    padding: 20px;
}

.coin-setting-item {
    position: relative;
    margin-bottom: 25px;
}

/* 编辑区代币名称标签 */
.coin-setting-item::before {
    content: attr(data-coin);
    position: absolute;
    top: -20px;
    left: 0;
    font-family: 'PingFangMedium';
    font-size: 14px;
    color: #333;
}

.setting-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.balance-input,
.display-select,
.select-state,
.order-input {
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 14px;
    color: #333;
}

.balance-input {
    width: 120px;
}

.display-select,
.select-state {
    width: 100px;
    background: #fff;
    cursor: pointer;
}

.order-input {
    width: 50px;
    text-align: center;
}

/* 选择框样式 */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

/* 输入框placeholder样式 */
input::placeholder {
    color: #999;
}

/* 输入框聚焦样式 */
input:focus,
select:focus {
    outline: none;
    border-color: #409EFF;
}

/* 状态设置区域 */
.status-settings {
    padding: 20px;
    border-bottom: 1px solid #E5E5E5;
}

.status-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.status-item label {
    width: 100px;
    font-size: 14px;
    color: #333;
    margin-right: 10px;
}

.status-item select {
    width: 200px;
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

/* 时间状态样式 */
.time {
    border-radius: 20px;
    padding: 2px 8px;
    font-family: 'SFProTextMedium';
    font-size: 16px;
}

.time.green {
    color: #FFFFFF;
    background-color: #30D158;
}

.time.blue {
    color: #FFFFFF;
    background-color: #0A84FF;
}

.time.yellow {
    color: #FFFFFF;
    background-color: #FF9F0A;
}

/* 编辑区二样式 */
.edit-section-2 {
    width: 500px;
    height: 842px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-left: 20px;
}

/* 语言设置 */
.language-settings {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.language-settings label {
    width: 100px;
    font-size: 14px;
    color: #333;
    margin-right: 10px;
}

.language-select {
    width: 200px;
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

/* 状态设置区域 */
.status-settings {
    padding: 20px;
    border-top: 1px solid #E5E5E5;
}

.status-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.status-item label {
    width: 100px;
    font-size: 14px;
    color: #333;
    margin-right: 10px;
}

.status-item select {
    width: 200px;
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

/* 选择框聚焦样式 */
.language-select:focus,
.status-item select:focus {
    outline: none;
    border-color: #409EFF;
}