@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;700&display=swap');

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*,body {
	padding: 0px;
	margin: 0px;
	font-family: 'Rajdhani', "微软雅黑", sans-serif;
	color:#fff;
}
body {
	background: radial-gradient(ellipse at center, #0a2f4e 0%, #000d4a 70%, #000000 100%);
	min-height: 100vh;
	padding: 15px;
}
html,body {
	height: 100%;
}
li {
	list-style-type: none;
}
i {
	margin: 0px;
	padding: 0px;
	font-style: normal;
}
a {
	text-decoration: none;
	color: #fff;
}
h1,h2,h3,h4,h5,h6 {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* header整体flex布局 */
.header-flex {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 30px 0 10px 0;
}

/* 左侧LOGO块 */
.logo-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 180px;
    margin-left: 40px;
}
.logo {
    width: 140px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: bold;
    border-radius: 10px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    margin-top: 15px;
}
.logo-desc {
    color: #00eaff;
    font-size: 15px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 0 6px #00eaff99;
}

/* 中间标题块 */
.header-title {
    flex: 1;
    text-align: center;
    color: #fff;
    position: relative;
    margin: 0 20px;
    padding: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.header-title h1 {
    font-size: 46px;
    font-weight: bold;
    letter-spacing: 12px;
    margin: 0 0 10px 0;
    text-shadow: 0 0 16px #00eaff99, 0 0 2px #fff;
}
.header-title p {
    font-size: 22px;
    color: #00eaff;
    margin: 0 0 18px 0;
    letter-spacing: 3px;
    text-shadow: 0 0 8px #00eaff99;
}

/* 右侧时间块 */
.header-time-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 286px;
    height: 60px;
    font-size: 16px;
    color: #00ffe7;
    font-family: 'Orbitron', 'Consolas', 'Courier New', monospace;
    font-weight: bold;
    letter-spacing: 3px;
    margin-right: 26px;
    background: linear-gradient(90deg, #061a3a 60%, #003366 100%);
    border: 2.5px solid #00eaff;
    border-radius: 10px;
    box-shadow: 0 0 18px #00eaff99, 0 0 4px #00eaff inset;
    padding: 0 10px;
    text-shadow: 0 0 10px #00ffe7, 0 0 2px #fff;
    transition: box-shadow 0.3s, border-color 0.3s;
    margin-top: 15px;
}
.header-time-right:hover {
    border-color: #44d188;
    box-shadow: 0 0 28px #44d188cc, 0 0 8px #00eaff inset;
}

/* 移除原居中时间样式 */
.header-time-center { display: none; }

@media (max-width: 900px) {
    .header-title h1 { font-size: 28px; }
    .header-title p { font-size: 14px; }
    .header-time-right { font-size: 14px; min-width: 100px; margin-right: 10px; padding: 0 8px; height: 36px; }
    .logo-block { width: 90px; margin-left: 10px; }
    .logo { width: 60px; height: 30px; font-size: 12px; }
}

main {
    flex: 1;
    display: flex;
    gap: 24px;
    padding: 0 24px 24px 24px;
}

.left-panel, .right-panel {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.center-panel {
    flex: 5;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.panel {
    background: rgba(10, 23, 71, 0.5);
    border: 2px solid #00eaff;
    border-radius: 16px;
    box-shadow: 0 0 30px #00eaff55, 0 0 8px #00eaff55 inset;
    backdrop-filter: blur(2px);
    transition: box-shadow 0.3s;
    position: relative;
}

.panel:hover {
    box-shadow: 0 0 40px #00eaffcc, 0 0 12px #1a3a8b99 inset;
}

.panel h2 {
    font-size: 17px;
    color: #00eaff;
    font-family: 'Orbitron', 'Rajdhani', '微软雅黑', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 18px;
    border-left: 4px solid #00eaff;
    padding-left: 12px;
    text-shadow: 0 0 8px #00eaff;
    padding: 0px 18px 0px 18px;
    margin-left: 18px;
    margin-top: 28px;
    margin-bottom: 18px;
}

.panel .content {
    flex-grow: 1;
}

.top-summary {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.summary-box {
    background: rgba(10, 23, 71, 0.7);
    border: 1.5px solid #00eaff;
    border-radius: 12px;
    text-align: center;
    padding: 18px 8px;
    flex: 1;
    box-shadow: 0 0 12px #00eaff33 inset;
}

.summary-box h3 {
    font-size: 18px;
    color: #00eaff;
    font-family: 'Orbitron', 'Rajdhani', '微软雅黑', sans-serif;
    font-weight: 500;
    margin-bottom: 8px;
}

.summary-box p {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-top: 10px;
    text-shadow: 0 0 8px #00eaff;
    font-family: 'Orbitron', 'Rajdhani', '微软雅黑', sans-serif;
}

.globe-display {
    flex-grow: 1;
    border: 1px solid #1a3a8b;
    border-radius: 4px;
    display: flex;
    box-shadow: 0 0 10px rgba(26, 58, 139, 0.8);
}

#globe-chart {
    width: 100%;
    height: 100%;
    background: url(https://i.pinimg.com/originals/73/3f/ec/733fec651479860a3390823a312e0e27.gif) no-repeat center center;
    background-size: contain;
}

#farm-price, #farm-price-right {
    flex-grow: 1;
}

#quarterly-trend {
    height: 380px; /* Or adjust as needed */
}

#quote-comparison {
    flex-grow: 1;
}

/* Supply List Styles */
.supply-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.supply-list li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,234,255,0.08);
    font-size: 16px;
    font-family: 'Rajdhani', '微软雅黑', sans-serif;
}

.supply-list li:last-child {
    border-bottom: none;
}

.supply-list .rank {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: linear-gradient(135deg, #00eaff 0%, #005bff 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    margin-right: 16px;
    box-shadow: 0 0 8px #00eaff99;
}

.supply-list .rank-1 { background: linear-gradient(135deg, #00eaff 0%, #ff5b5b 100%); }
.supply-list .rank-2 { background: linear-gradient(135deg, #00eaff 0%, #ffe15b 100%); color: #222; }
.supply-list .rank-3 { background: linear-gradient(135deg, #00eaff 0%, #44d188 100%); }

.supply-list .province {
    flex-basis: 80px;
    font-weight: 500;
}

.supply-list .cities {
    flex-grow: 1;
    color: #7a9cff;
    padding-left: 10px;
}

.supply-list .value {
    flex-basis: 60px;
    text-align: right;
    font-weight: 700;
    position: relative;
    padding-right: 15px;
    color: #00eaff;
    font-size: 18px;
}

.supply-list .value::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -4px;
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent #44d188 transparent;
}

/* Trend Table Styles */
.trend-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 16px;
    font-family: 'Rajdhani', '微软雅黑', sans-serif;
    margin: 0;
}

.trend-table th {
    background: linear-gradient(90deg, #1a3a8b 0%, #005bff 100%);
    color: #fff;
    font-size: 18px;
    text-shadow: 0 0 8px #00eaff;
    border-bottom: 2px solid #00eaff;
    font-weight: 700;
    padding: 12px 0;
}

.trend-table td {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,234,255,0.08);
}

.trend-table tbody tr:hover {
    background: rgba(0,234,255,0.08);
}

#quarterly-trend .content {
    height: 220px;
    overflow: hidden;
    position: relative;
}

.egg-price-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(10, 23, 71, 0.5);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 18px #00eaff33, 0 0 8px #00eaff55 inset;
    margin-bottom: 0;
    font-family: 'Rajdhani', '微软雅黑', sans-serif;
}

.egg-price-table th, .egg-price-table td {
    padding: 6px 0;
    text-align: center;
    font-size: 15px;
    border-bottom: 1.5px solid rgba(0,234,255,0.18);
}

.egg-price-table th {
    background: #1a3a8b;
    color: #00eaff;
    font-size: 16px;
    font-weight: bold;
}

.egg-price-table td {
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
    background: transparent;
}

.egg-price-table td:last-child {
    border-right: none;
}

.egg-price-table td[rowspan] {
    background: linear-gradient(180deg, #00eaff22 0%, #005bff11 100%);
    color: #00eaff;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 0 8px #00eaff;
    border-right: 2px solid #00eaff33;
}

.egg-price-table tbody tr:nth-child(5),
.egg-price-table tbody tr:nth-child(10) {
    border-bottom: 2.5px solid #00eaff !important;
}

/* 城市与今日蛋价之间高亮分隔线，兼容rowspan结构 */
.egg-price-table td + td,
.egg-price-table th + th {
    box-shadow: 1px 0 8px #00eaff44;
}
.egg-price-table td:last-child,
.egg-price-table th:last-child {
    border-right: none;
}

/* ==================================
   合作养殖场报价 - 滚动列表
   ================================== */
#farm-price .content {
    padding: 0 10px 10px;
}

.scroll-list {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 386px; /* 8行 * 30px */
    overflow: hidden;
    position: relative;
}

.scroll-list li {
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid rgba(0, 234, 255, 0.1);
    font-family: 'Rajdhani', '微软雅黑', Arial, sans-serif;
    transition: all 0.3s;
    border-radius: 4px;
}

.scroll-list li:first-child {
    background-color: rgba(255, 224, 102, 0.15);
    border-left: 3px solid #ffe066;
    font-weight: bold;
}

.scroll-list li span {
    white-space: nowrap;
}

.scroll-list li span.province {
    color: #44d188;
    text-shadow: 0 0 6px rgba(68, 209, 136, 0.5);
    flex-basis: 50px;
}
.scroll-list li span.city {
    color: #00eaff;
    flex-basis: 60px;
    text-align: center;
}
.scroll-list li span.price {
    color: #ffe066;
    text-shadow: 0 0 6px rgba(255, 224, 102, 0.5);
    margin-left: auto;
    font-weight: bold;
}