* {
margin: 0;
padding: 0;
		 box-sizing: border-box;
		 font-family: 'Arial', sans-serif;
}

body {
background: linear-gradient(135deg, #181888, #00aeef, #ec008c);
color: #fff;
	   min-height: 100vh;
padding: 20px;
}

.container {
	max-width: 1600px;
margin: 0 auto;
}

header {
	text-align: center;
	margin-bottom: 30px;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
			border-radius: 15px;
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

h1 {
	font-size: 3.5rem;
	margin-bottom: 15px;
	text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.admin-bar {
display: flex;
		 justify-content: space-between;
		 align-items: center;
		 margin-bottom: 25px;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
			border-radius: 15px;
}

.admin-toggle {
display: flex;
		 align-items: center;
gap: 10px;
}

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
		background-color: #ccc;
transition: .4s;
			border-radius: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
		background-color: white;
transition: .4s;
			border-radius: 50%;
}

input:checked + .slider {
		  background-color: #2196F3;
	  }

input:checked + .slider:before {
transform: translateX(26px);
	  }

.controls {
display: flex;
		 justify-content: space-between;
		 margin-bottom: 25px;
		 flex-wrap: wrap;
gap: 15px;
}

.search-box {
flex: 1;
	  min-width: 300px;
}

.search-box input {
width: 100%;
padding: 15px;
		 font-size: 1.4rem;
border: none;
		border-radius: 10px;
background: rgba(255, 255, 255, 0.9);
}

.filter-buttons {
display: flex;
gap: 15px;
	 flex-wrap: wrap;
}

.filter-btn {
padding: 15px 25px;
		 font-size: 1.4rem;
border: none;
		border-radius: 10px;
background: rgba(255, 255, 255, 0.2);
color: white;
cursor: pointer;
transition: all 0.3s;
}

.filter-btn.active {
background: rgba(255, 255, 255, 0.9);
color: #1a2a6c;
	   font-weight: bold;
}

.filter-btn:hover {
background: rgba(255, 255, 255, 0.3);
}

.orders-grid {
display: grid;
		 grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 25px;
}

.order-card {
background: rgba(255, 255, 255, 0.9);
color: #333;
	   border-radius: 15px;
padding: 20px;
		 box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
transition: transform 0.3s;
}

.order-card:hover {
transform: translateY(-5px);
		   box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
}

.order-header {
display: flex;
		 justify-content: space-between;
		 align-items: center;
		 margin-bottom: 15px;
		 padding-bottom: 15px;
		 border-bottom: 2px solid #eee;
}

.client-name {
	font-size: 1.8rem;
	font-weight: bold;
color: #1a2a6c;
}

.order-id {
	font-size: 1.4rem;
color: #666;
}

.order-details {
	margin-bottom: 15px;
}

.detail-item {
display: flex;
		 justify-content: space-between;
		 margin-bottom: 10px;
		 font-size: 1.4rem;
}

.status-badge {
padding: 8px 15px;
		 border-radius: 20px;
		 font-size: 1.3rem;
		 font-weight: bold;
		 text-align: center;
}

.status-new {
background: #ff9800;
color: white;
}

.status-progress {
background: #2196f3;
color: white;
}

.status-review {
background: #9c27b0;
color: white;
}

.status-completed {
background: #4caf50;
color: white;
}

.order-footer {
display: flex;
		 justify-content: space-between;
		 align-items: center;
		 margin-top: 15px;
}

.date {
	font-size: 1.3rem;
color: #666;
}

.toggle-btn {
background: #1a2a6c;
color: white;
border: none;
padding: 10px 15px;
		 border-radius: 8px;
cursor: pointer;
		font-size: 1.3rem;
transition: background 0.3s;
}

.toggle-btn:hover {
background: #2a3c9e;
}

.order-expanded {
display: none;
		 margin-top: 20px;
		 padding-top: 20px;
		 border-top: 2px solid #eee;
}

.expanded-details {
	margin-bottom: 20px;
}

.expanded-title {
	font-size: 1.6rem;
	margin-bottom: 10px;
color: #1a2a6c;
}

.attachments {
display: flex;
gap: 15px;
	 flex-wrap: wrap;
}

.attachment {
width: 100px;
height: 100px;
		border-radius: 10px;
overflow: hidden;
cursor: pointer;
border: 2px solid #ddd;
position: relative;
}

.attachment img {
width: 100%;
height: 100%;
		object-fit: cover;
transition: transform 0.3s;
}

.attachment img:hover {
transform: scale(1.1);
}

.delete-attachment {
position: absolute;
top: -10px;
right: -10px;
background: #f44336;
color: white;
width: 25px;
height: 25px;
		border-radius: 50%;
display: flex;
		 justify-content: center;
		 align-items: center;
cursor: pointer;
		font-size: 14px;
		font-weight: bold;
}

.progress-bar {
height: 25px;
background: #e0e0e0;
			border-radius: 12px;
overflow: hidden;
margin: 15px 0;
}

.progress-fill {
height: 100%;
background: linear-gradient(90deg, #ff9800, #ffeb3b);
			border-radius: 12px;
transition: width 0.5s;
}

.add-order-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 80px;
height: 80px;
background: #1a2a6c;
color: white;
	   border-radius: 50%;
display: flex;
		 justify-content: center;
		 align-items: center;
		 font-size: 2.5rem;
		 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: all 0.3s;
			z-index: 100;
}

.add-order-btn:hover {
transform: scale(1.1);
background: #2a3c9e;
}

/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
			z-index: 1000;
			justify-content: center;
			align-items: center;
}

.modal-content {
background: white;
color: #333;
padding: 30px;
		 border-radius: 15px;
width: 90%;
	   max-width: 600px;
	   max-height: 90vh;
	   overflow-y: auto;
}

.modal-header {
display: flex;
		 justify-content: space-between;
		 align-items: center;
		 margin-bottom: 20px;
		 padding-bottom: 15px;
		 border-bottom: 2px solid #eee;
}

.modal-title {
	font-size: 2rem;
color: #1a2a6c;
}

.close-modal {
background: none;
border: none;
		font-size: 2rem;
cursor: pointer;
color: #666;
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
display: block;
		 font-size: 1.4rem;
		 margin-bottom: 8px;
color: #333;
}

.form-group input,
	.form-group select,
	.form-group textarea {
width: 100%;
padding: 12px;
		 font-size: 1.4rem;
border: 2px solid #ddd;
		border-radius: 8px;
	}

.form-group textarea {
	min-height: 100px;
resize: vertical;
}

.form-actions {
display: flex;
		 justify-content: flex-end;
gap: 15px;
	 margin-top: 20px;
}

.btn {
padding: 12px 25px;
		 font-size: 1.4rem;
border: none;
		border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
}

.edit-btn{
	background: #F81818;
}


.btn-primary {
background: #F81888;
color: white;
}
.btn-primary:hover {
background: #2a3c9e;
}

.btn-secondary {
background: #f1f1f1;
color: #333;
}

.btn-secondary:hover {
background: #ddd;
}

.file-upload {
display: flex;
		 flex-direction: column;
gap: 10px;
}

.file-upload-btn {
background: #4caf50;
color: white;
padding: 10px 15px;
		 border-radius: 8px;
cursor: pointer;
		text-align: center;
		font-size: 1.3rem;
}

.file-list {
display: flex;
		 flex-wrap: wrap;
gap: 10px;
}

@media (max-width: 768px) {
	h1 {
		font-size: 2.5rem;
	}

	.orders-grid {
		grid-template-columns: 1fr;
	}

	.filter-btn {
padding: 10px 15px;
		 font-size: 1.2rem;
	}

	.modal-content {
padding: 20px;
width: 95%;
	}
}