/* 设备模拟器样式 */
.phone-container {
    position: relative;
    width: 375px;
    height: 812px;
    margin: 0 auto;
}

.phone-frame {
    position: relative;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 12px;
    box-shadow: 0 0 0 2px #333, 0 0 0 6px #1a1a1a, 0 20px 40px rgba(0,0,0,0.2);
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.laptop-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.laptop-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #1a1a1a;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.laptop-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

/* 底部导航栏 */
.bottom-nav {
    @apply fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 shadow-lg;
}

.nav-item {
    @apply flex flex-col items-center justify-center py-3 px-5 text-gray-600 hover:text-blue-600 transition-colors duration-200;
}

.nav-item.active {
    @apply text-blue-600;
}

/* 卡片样式 */
.card {
    @apply bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-200;
}

/* 图表容器样式 */
.chart-wrapper {
    position: relative;
    height: 200px;
    width: 100%;
}

/* 列表样式 */
.list-item {
    @apply flex items-center justify-between p-4 hover:bg-gray-50 transition-colors duration-200;
}

/* 按钮样式 */
.btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition-colors duration-200;
}

.btn-danger {
    @apply bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors duration-200;
}

/* 徽章样式 */
.badge {
    @apply inline-flex items-center justify-center px-2 py-1 text-xs font-medium rounded-full;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

/* 图标容器 */
.icon-container {
    @apply w-10 h-10 rounded-xl flex items-center justify-center;
}

/* 动画效果 */
.hover-scale {
    @apply transition-transform duration-200 hover:scale-105;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded hover:bg-gray-400;
}