/* 状态栏样式 */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 4px;
    height: 24px;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* iOS 状态栏样式 */
.status-bar.ios {
    padding: 6px 20px 4px;
    font-weight: 600;
    font-size: 14px;
}

.status-bar.ios .status-bar-time {
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* Android 状态栏样式 */
.status-bar.android {
    padding: 8px 16px 4px;
    font-weight: 500;
    font-size: 13px;
}

.status-bar.android .status-bar-time {
    font-weight: 500;
    letter-spacing: 0;
}

/* Android 电池样式 - 更方正，右侧有突出 */
.battery.android {
    width: 26px;
    height: 13px;
    border-radius: 2px;
    margin-left: 1px;
}

.battery.android::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5px;
    height: 5px;
    background-color: #000;
    border-radius: 0 1px 1px 0;
}

.battery-fill.android {
    border-radius: 1px;
    background-color: #4CAF50;
}

.status-bar-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.status-bar-center {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
    font-size: 11px;
}

/* 状态栏应用图标（WhatsApp / Facebook / Instagram 等） */
.status-bar-app {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 8px;
    flex-shrink: 0;
}

.status-bar-app.whatsapp {
    background-color: #25D366;
}

.status-bar-app.facebook {
    background: none;
    padding: 0;
}

.status-bar-app.facebook img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

.status-bar-app.instagram {
    background: none;
    padding: 0;
}

.status-bar-app.instagram img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

.status-bar-app.twitter {
    background-color: #1DA1F2;
}

.status-bar-app.tiktok {
    background: linear-gradient(135deg, #000000 0%, #FF0050 50%, #00F2EA 100%);
}

.status-bar-app.youtube {
    background-color: #FF0000;
}

.status-bar-app.telegram {
    background-color: #0088cc;
}

.status-bar-app.messenger {
    background: linear-gradient(135deg, #0084ff 0%, #006fff 100%);
}

.status-bar-app.airplane {
    background-color: #2196F3;
}

.status-bar-icon.more-icon {
    font-size: 9px;
    color: #000000;
    margin-left: 2px;
}

/* 黑暗模式下的应用图标 */
.container.dark-mode .status-bar-app {
    color: #FFFFFF;
}

.container.dark-mode .status-bar-icon.more-icon {
    color: #FFFFFF;
}

.carrier-name {
    font-size: 12px;
    font-weight: 600;
    color: #000;
}

.network-type {
    font-size: 11px;
    font-weight: 600;
    color: #000;
    margin-left: 2px;
}

.weather-info {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #000;
}

.weather-icon {
    font-size: 10px;
}

.weather-temp {
    font-size: 10px;
    font-weight: 600;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #FF3D00;
    color: #FFF;
    border-radius: 8px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    border: 1.5px solid #FFF;
}

.charging-icon {
    font-size: 10px;
    color: #4CAF50;
    margin-right: 2px;
}

.status-bar-time {
    font-size: 14px;
    font-weight: 600;
}

.status-bar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 信号强度样式 */
.signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 10px;
}

.signal-bar {
    width: 3px;
    background-color: #000;
    border-radius: 1px;
}

.signal-bar.bar1 { height: 3px; }
.signal-bar.bar2 { height: 5px; }
.signal-bar.bar3 { height: 7px; }
.signal-bar.bar4 { height: 9px; }

/* 蓝牙、定位等图标 */
.status-bar-feature-icon {
    font-size: 10px;
    color: #000;
    margin-right: 3px;
}

.battery {
    width: 28px;
    height: 14px;
    border: 1.5px solid #000;
    border-radius: 2px;
    padding: 1px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.battery::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 7px;
    background-color: #000;
    border-radius: 0 1px 1px 0;
}

/* iOS 电池样式 - 更接近真实iPhone，圆角较大，右侧有突出，通常不显示百分比 */
.battery.ios {
    width: 27px;
    height: 13px;
    border-radius: 3.5px;
    border-width: 1.5px;
    margin-left: 2px;
    padding: 0.5px;
}

.battery.ios::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 6px;
    background-color: #000;
    border-radius: 0 1.5px 1.5px 0;
}

.battery-fill {
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    width: 68%;
    height: calc(100% - 3px);
    background-color: #4CAF50;
    border-radius: 1px;
    z-index: 1;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.battery-fill.low {
    background-color: #FF3D00 !important;
}

.battery-fill.medium {
    background-color: #FFA726 !important;
}

.battery-fill.high {
    background-color: #4CAF50;
}

.battery-fill.ios {
    border-radius: 2.5px;
    background-color: #4CAF50;
    left: 0.5px;
    top: 0.5px;
    height: calc(100% - 1px);
}

.battery-fill.ios.low {
    background-color: #FF3D00 !important;
}

.battery-fill.ios.medium {
    background-color: #FFA726 !important;
}

.battery-text {
    position: relative;
    z-index: 2;
    font-size: 9px;
    font-weight: 600;
    color: #000;
    line-height: 1;
}

.battery-text.ios {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: -0.1px;
    display: none; /* iOS通常不显示百分比 */
}

.battery-text.android {
    font-size: 8px;
    font-weight: 500;
}

.battery-text.samsung {
    font-size: 9px;
    font-weight: 600;
}

.battery-text.pixel {
    font-size: 8px;
    font-weight: 500;
}

.battery-text.xiaomi {
    font-size: 8px;
    font-weight: 600;
}

.battery-text.huawei {
    font-size: 9px;
    font-weight: 600;
}

.battery-text.oppo {
    font-size: 8px;
    font-weight: 600;
}

.battery-text.vivo {
    font-size: 9px;
    font-weight: 600;
}

.battery-text.oneplus {
    font-size: 8px;
    font-weight: 600;
}


/* Samsung Galaxy 电池样式 - 较宽，圆角适中 */
.battery.samsung {
    width: 30px;
    height: 14px;
    border-radius: 2px;
    border-width: 1.5px;
    padding: 1px;
}

.battery.samsung::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 7px;
    background-color: #000;
    border-radius: 0 1px 1px 0;
}

.battery-fill.samsung {
    border-radius: 1px;
    background-color: #4CAF50;
    left: 1.5px;
    top: 1.5px;
    height: calc(100% - 3px);
}

/* Google Pixel 电池样式 - 较窄，圆角较小 */
.battery.pixel {
    width: 26px;
    height: 13px;
    border-radius: 1.5px;
    border-width: 1.5px;
    padding: 1px;
}

.battery.pixel::after {
    content: '';
    position: absolute;
    right: -2.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5px;
    height: 6px;
    background-color: #000;
    border-radius: 0 0.5px 0.5px 0;
}

.battery-fill.pixel {
    border-radius: 1px;
    background-color: #4CAF50;
    left: 1.5px;
    top: 1.5px;
    height: calc(100% - 3px);
}

/* 小米 电池样式 - 圆角适中 */
.battery.xiaomi {
    width: 29px;
    height: 14px;
    border-radius: 2px;
    border-width: 1.5px;
    padding: 1px;
}

.battery.xiaomi::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 7px;
    background-color: #000;
    border-radius: 0 1px 1px 0;
}

.battery-fill.xiaomi {
    border-radius: 1px;
    background-color: #4CAF50;
    left: 1.5px;
    top: 1.5px;
    height: calc(100% - 3px);
}

/* Huawei/Honor 电池样式 - 圆角较大 */
.battery.huawei {
    width: 28px;
    height: 14px;
    border-radius: 3px;
    border-width: 1.5px;
    padding: 1px;
}

.battery.huawei::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 7px;
    background-color: #000;
    border-radius: 0 1.5px 1.5px 0;
}

.battery-fill.huawei {
    border-radius: 2px;
    background-color: #4CAF50;
    left: 1.5px;
    top: 1.5px;
    height: calc(100% - 3px);
}

/* OPPO/Realme 电池样式 - 圆角适中 */
.battery.oppo {
    width: 29px;
    height: 14px;
    border-radius: 2.5px;
    border-width: 1.5px;
    padding: 1px;
}

.battery.oppo::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 7px;
    background-color: #000;
    border-radius: 0 1.5px 1.5px 0;
}

.battery-fill.oppo {
    border-radius: 1.5px;
    background-color: #4CAF50;
    left: 1.5px;
    top: 1.5px;
    height: calc(100% - 3px);
}

/* Vivo 电池样式 - 圆角较大 */
.battery.vivo {
    width: 29px;
    height: 14px;
    border-radius: 3px;
    border-width: 1.5px;
    padding: 1px;
}

.battery.vivo::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 7px;
    background-color: #000;
    border-radius: 0 1.5px 1.5px 0;
}

.battery-fill.vivo {
    border-radius: 2px;
    background-color: #4CAF50;
    left: 1.5px;
    top: 1.5px;
    height: calc(100% - 3px);
}

/* OnePlus 电池样式 - 较窄，圆角较小 */
.battery.oneplus {
    width: 27px;
    height: 13px;
    border-radius: 2px;
    border-width: 1.5px;
    padding: 1px;
}

.battery.oneplus::after {
    content: '';
    position: absolute;
    right: -2.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5px;
    height: 6px;
    background-color: #000;
    border-radius: 0 0.5px 0.5px 0;
}

.battery-fill.oneplus {
    border-radius: 1px;
    background-color: #4CAF50;
    left: 1.5px;
    top: 1.5px;
    height: calc(100% - 3px);
}

/* 默认Android电池样式 - 标准矩形 */
.battery.default {
    width: 28px;
    height: 14px;
    border-radius: 2px;
    border-width: 1.5px;
    padding: 1px;
}

.battery.default::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 7px;
    background-color: #000;
    border-radius: 0 1px 1px 0;
}

.battery-fill.default {
    border-radius: 1px;
    background-color: #4CAF50;
    left: 1.5px;
    top: 1.5px;
    height: calc(100% - 3px);
}

/* 仅图标模式（不显示百分比） */
.battery.icon-only {
    width: 22px;
    height: 11px;
}

.battery.icon-only .battery-text {
    display: none;
}

/* 仅百分比模式（不显示电池框） */
.battery.percent-only {
    border: none;
    width: auto;
    height: auto;
    padding: 0;
}

.battery.percent-only::after {
    display: none;
}

.battery.percent-only .battery-fill {
    display: none;
}

.battery.percent-only .battery-text {
    position: static;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* 黑暗模式下的状态栏样式 */
.container.dark-mode .status-bar {
    color: #FFFFFF;
}

.container.dark-mode .status-bar-time {
    color: #FFFFFF;
}

.container.dark-mode .carrier-name {
    color: #FFFFFF;
}

.container.dark-mode .network-type {
    color: #FFFFFF;
}

.container.dark-mode .weather-info {
    color: #FFFFFF;
}

.container.dark-mode .status-bar-feature-icon {
    color: #FFFFFF;
}

.container.dark-mode .signal-bar {
    background-color: #FFFFFF;
}

.container.dark-mode .battery {
    border-color: #FFFFFF;
}

.container.dark-mode .battery.ios::after,
.container.dark-mode .battery.samsung::after,
.container.dark-mode .battery.pixel::after,
.container.dark-mode .battery.xiaomi::after,
.container.dark-mode .battery.huawei::after,
.container.dark-mode .battery.oppo::after,
.container.dark-mode .battery.vivo::after,
.container.dark-mode .battery.oneplus::after {
    background-color: #FFFFFF;
}

.container.dark-mode .battery-text {
    color: #FFFFFF;
}