* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }

  body {
	font-family:
	  -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
	  "Microsoft YaHei", sans-serif;
	background: #f0f4f8;
	font-size: 9px;
	color: #333;
	min-height: 100vh;
  }

  /* ===== PAGE WRAPPER ===== */
  .page-wrap {
	width: 100%;
	background: #fff;
	min-height: 100vh;
  }

  /* ===== HEADER: dark decorative band ===== */
  .top-bar {
	position: relative;
	z-index: 1;
	height: 200px;
	background: url('header-image.jpg') no-repeat center center/cover;
	overflow: hidden;
  }

  /* Stick top-bar + header-card together */
  .header-wrap {
	position: relative;
	overflow: visible;
  }

  /* full-width decorative SVG */
  .header-deco {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
  }

	.zfbg-btn[data-v-460089d2] {
		position: absolute;
		top: 26%;
		right: 0;
		height: 2.3rem;
		border: 1px solid #fff;
		border-radius: 20px 0 0 20px;
		width: 6rem;
		font-size: 14px;
		font-weight: 700;
		background-color: #00113c;
		color: #fff
	}
  .unlock-btn {
	position: absolute;
	right: 28px;
	top: 18px;
	transform: none;
	background: rgba(255, 255, 255, 0.13);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 6px;
	padding: 6px 18px;
	font-size: 14px;
	cursor: pointer;
	letter-spacing: 0.5px;
	z-index: 2;
	backdrop-filter: blur(4px);
	transition: background 0.2s;
  }

  .unlock-btn:hover {
	background: rgba(255, 255, 255, 0.24);
  }

  /* ===== HEADER CARD (company + tabs) ===== */
  .header-card {
	position: absolute;
	bottom: -7%;
	left: 5%;
	height: 70px;
	z-index: 100;
	margin: 0 auto;
	transform: translateY(-12px);
	width: 90%;
	background: #fff;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
  }

  /* ===== COMPANY NAME BAR ===== */
  .company-bar {
	background: #fff;
	text-align: center;
	padding: 9px 24px 24px;
  }

  .company-name {
	font-size: 2rem;
	font-weight: bolder;
	color: #333;
  }

  /* ===== TABS ===== */
  .tab-bar {
	display: flex;
	background: #fff;
  }

  .tab-item {
	flex: 1;
	text-align: center;
	padding: 18px 0 12px;
	color: #626571;
	font-size: 1.4rem;
	line-height: 50px;
	cursor: pointer;
	position: relative;
	font-weight: 700;
	transition: color 0.2s;
	user-select: none;
  }

  .tab-item.active {
	color: #000;
  }

  .tab-item.active::after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: 4%;
	right: 4%;
	height: 2px;
	width: 92%;
	background: pink;
	border-radius: 2px;
  }

  @media (max-width: 640px) {
	.header-card {
	  width: 90%;
	  transform: translateY(-14px);
	}

	.company-name {
	  font-size: 20px;
	}
	.tab-item {
	  font-size: 15.75px;
	  padding: 16px 0 10px;
	}
  }

  /* ===== TAB PANELS ===== */
  .tab-panel {
	display: none;
	padding: 0;
	position: relative;
	border: 1px solid #eff0f4;
	margin: 2px 8px 8px;
  }
  .tab-panel.active {
	display: block;
  }

  @media (max-width: 640px) {
	.tab-panel {
	  padding: 0;
	}
  }

  /* ===== INFO ROWS ===== */
  .info-row {
	display: flex;
	align-items: center;
	padding: 13px 10px;
  }

  .info-row:last-child {
	border-bottom: none;
  }

  .row-label {
	color: #626571;
	font-size: 12.6px;
	width: 35%;
	flex-shrink: 0;
  }

  .row-value {
	color: #626571;
	font-size: 12.6px;
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
  }

  .copy-btn {
	color: blue;
	font-size: 14px;
	font-style: italic;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
	padding: 1px 2px;
	border-radius: 3px;
	transition: opacity 0.15s;
	flex-shrink: 0;
  }
  .copy-btn:hover {
	opacity: 0.7;
  }

  /* ===== 水母经营分 / 社保缴费（基本信息内嵌） ===== */
  .biz-extra-block {
	padding: 0px 20px 10px 10px;
  }

  .biz-extra-block--tight {
	padding-top: 8px;
  }

  .biz-extra-head {
	float: left;
	width: 35%;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
  }

  .biz-extra-head--plain {
	margin-bottom: 26px;
  }

  .biz-extra-title {
	font-size: 12.6px;
	font-weight: lighter;
	color: rgb(98, 101, 113);
  }

  .biz-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: rgb(64, 158, 255);
	color: #fff;
	font-size: 10px;
	/*font-style: italic; */
	font-weight: 400;
	line-height: 1;
	cursor: help;
	flex-shrink: 0;
  }

  .jelly-score-num {
	text-align: left;
	
	font-size: 12.6px;
	font-weight: 400;
	color: rgb(98, 101, 113);
	letter-spacing: 0.02em;
	margin: 0 0 6px;
  }

  .jelly-score-bar-wrap {
	padding: 0 4px;
	margin-bottom: 6px;
	margin-top: 24px;
  }

  .jelly-score-bar {
	position: relative;
	height: 14px;
	border-radius: 7px;
	overflow: hidden;
	background: linear-gradient(90deg,#4eaaff,#60cfff,#22c55e);
  }

  .jelly-score-marker {
	 top: 0;
    bottom: 0;
    width: 2px;
    z-index: 10
  }
  .jelly-score-marker, .jelly-score-marker::after{
	position: absolute;
    background: #000;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .jelly-score-marker::after{
    content: "";
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%
}

  .jelly-scale-nums {
	position: relative;
	height: 14px;
	padding: 0 6px 16px;
	font-size: 11px;
	color: #6b7280;
	font-weight: 400;
	margin-bottom: 2px;
  }

  .jelly-scale-lbl-row {
	position: relative;
	height: 14px;
	padding: 0 6px;
	margin-top: 0;
  }

  .jelly-scale-lbl {
	font-size: 12px;
	color: #374151;
  }

  .jelly-scale-lbl--low { text-align: left; }
  .jelly-scale-lbl--pin { text-align: center; color: #9ca3af; font-weight: 400; }
  .jelly-scale-lbl--high { text-align: right; }

  .jelly-scale-desc {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	font-size: 11px;
	color: #6b7280;
	line-height: 1.35;
  }
  
  

  .jelly-scale-desc > :first-child {
	text-align: left;
  }

  .jelly-scale-desc > :last-child {
	text-align: right;
  }

  .jelly-scale-desc-mid {
	text-align: center;
	color: #5c6370;
	font-weight: 600;
  }

  .ss-record-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
	margin-bottom: 12px;
  }

  .ss-record-label {
	font-size: 12px;
	color: #9ca3af;
	margin-bottom: 4px;
  }

  .ss-record-value {
	font-size: 15px;
	font-weight: 600;
	color: #1f2937;
  }

  .ss-record-note {
	  padding: 10px 12px;
	  border-radius: 6px;
	  background: #fff;
	  display: flex;
	  align-items: center;
	  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.1);
	  border: 1px solid #007bff;
	  -webkit-box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
	  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
	  border-radius: 10px;
	  margin-top: 5px;
	  margin-bottom: 10px;
	  font-size: 13px;
  }

  /* 社保表格 */
  .sss-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 10px;
  }

  .sss-table thead th {
	background: #f6f9ff;
	color: #626571;
	font-size: 11.25px;
	font-weight: 700;
	padding: 12px 0;
	text-align: center;
  }

  .sss-table tbody td {
	text-align: center;
	padding: 12px 0;
	font-size: 11.25px;
	font-weight: lighter;
	color: #1f2937;
	background: none;
  }

  /* 社保格子容器 */
  .sss-record-note {
	display: flex;
	gap: 0;
	margin-bottom: 10px;
  }

  .ss-record-cell {
	flex: 1;
	text-align: center;
	padding: 6px 0;
  }

  .ss-record-cell + .ss-record-cell {
	border-left: none;
  }

  .ss-record-label {
	font-size: 12px;
	color: #9ca3af;
	margin-bottom: 4px;
  }

  .ss-record-value {
	font-size: 15px;
	font-weight: 600;
	color: #1f2937;
  }

  .ss-record-note {
	/*font-size: 11px;*/
	/*line-height: 1.5;*/
	/*color: #4b6a9b;*/
	/*padding: 8px 12px;*/
	/*background: #eef5ff;*/
	/*border: 1px solid #c5dcf5;*/
	/*border-radius: 6px;*/
	/*margin-top: 4px;*/
  }

  /* 社保缴费记录表格 */
  .sss-record-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	margin-bottom: 10px;
  }

  .sss-record-table thead th {
	background: #f6f9ff;
	padding: 10px 12px;
	text-align: center;
	color: #626571;
	font-weight: 600;
  }

  .sss-record-table tbody td {
	padding: 10px 12px;
	text-align: center;
	color: #1f2937;
	font-weight: 600;
	font-size: 14px;
  }

  .sss-record-dotted {
	border-top: 1px dashed #d1d5db;
	margin: 8px 0;
  }

  .sss-record-note {
	display: flex;
  }

  .ss-record-cell {
	flex: 1;
	text-align: center;
	background: #f6f9ff;
	padding: 10px 8px;
  }

  /* ===== SECTION TITLE ===== */
  .section-title {
	font-size: 14px;
	font-weight: 600;
	color: #626571;
	margin: 20px 0 10px;
	padding-left: 10px;
	border-left: 3px solid #1565c0;
  }

  /* ===== SUB SECTIONS (股东明细 / 银税互动) ===== */
  .sub-section {
	padding: 3px 10px 15px;
  }

  /* ===== 水母经营分说明面板 ===== */
  .jelly-info-panel {
	display: none;
	padding: 10px 12px;
	background: #fff;
	box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
	border: 1px solid #007bff;
	border-radius: 10px;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 13px;
  }

  .jelly-info-panel.open {
	  display: flex;
	  align-items: center;
  }

  .jelly-info-text {
	font-size: 12.6px;
	color: #333;
	line-height: 1.7;
	margin: 0;
  }

  .jelly-info-link {
	  background: #409eff;
	  color: #fff;
	  border: none;
	  border-radius: 4px;
	  padding: 6px 10px;
	  font-size: 12px;
	  cursor: pointer;
  }

  /* ===== 水母经营分弹框 ===== */
  .jelly-modal-mask {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 9999;
	align-items: center;
	justify-content: center;
  }

  .jelly-modal-mask.open {
	display: flex;
  }

  .jelly-modal {
	background: #fff;
	border-radius: 10px;
	width: 88%;
	max-width: 420px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 32px rgba(0,0,0,0.18);
	overflow: hidden;
  }

  .jelly-modal-head {
	display: none;
  }

  .jelly-modal-body {
	padding: 18px 16px 14px;
	overflow-y: auto;
	flex: 1;
  }

  .jelly-modal-tip {
	font-size: 14px;
	font-weight: 700;
	color: #1a1d24;
	line-height: 1.7;
	margin-bottom: 16px;
  }

  .jelly-modal-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
  }

  .jelly-modal-list li {
	padding: 12px 14px;
	background: #eef4fb;
	border-radius: 8px;
	font-size: 13px;
	color: #2c3e50;
	line-height: 1.7;
  }

  .jelly-modal-score {
	font-size: 13px;
	color: #2a9d6e;
	font-weight: 700;
  }

  .jelly-modal-grade {
	font-size: 13px;
	color: #2a9d6e;
	font-weight: 700;
	margin-right: 4px;
  }

  .jelly-modal-desc {
	font-size: 13px;
	color: #2c3e50;
	line-height: 1.7;
  }

  .jelly-modal-foot {
	padding: 12px 16px 16px;
	border-top: 1px solid #eef0f5;
  }

  .jelly-modal-close-btn {
	display: inline-block;
	background: #1976d2;
	color: #fff;
	font-size: 14px;
	padding: 8px 24px;
	border-radius: 6px;
	cursor: pointer;
	border: none;
  }

  .sub-section-style {
	padding: 20px 0px 15px;
  }

  .sub-title {
	font-size: 12px;
	font-weight: 700;
	color: #626571;
	margin-bottom: 24px;
  }

  .info-table {
	width: 96%;
	border-collapse: collapse;
	font-size: 11.25px;
  }

  .info-table-bank {
	width: 100%;
	border-collapse: collapse;
	font-size: 11.25px;
  }

  .info-table th {
	background: #f0f4ff;
	padding: 14px 1px;
	text-align: center;
	color: #626571;
	font-weight: 600;
	border: none;
  }

  .info-table td {
	padding: 14px 20px;
	text-align: center;
	color: #626571;
	border: none;
  }

  .info-table thead tr th {
	background: #f6f9ff;
  }
  .info-table tbody tr:nth-child(odd) td {
	background: #fff;
  }
  .info-table tbody tr:nth-child(even) td {
	background: #f6f9ff;
  }
  .info-table tbody tr:hover td {
	background: #edf2ff;
  }

  /* 收起/展开按钮 */
  .collapse-toggle {
	text-align: center;
	padding: 10px 0 14px;
	color: blue;
	font-size: 11.25px;
	cursor: pointer;
	user-select: none;
  }
  .collapse-toggle:hover {
	opacity: 0.7;
  }

  /* 折叠状态下隐藏多余行 */
  .bank-extra.hidden {
	display: none;
  }

  /* Tax metrics (two-column key values) */
  .tax-metrics {
	width: 100%;
	float: left;
	grid-template-columns: 1fr 1fr;
	gap: 18px 44px;
	padding: 17px 40px 0px;
  }

  .tax-metric {
	display: grid;
	float: left;
	width: 50%;
	margin-bottom: 5px;
	gap: 6px;
	align-content: start;
  }

  .tax-metric .m-label {
	color: #a9a2a8;
	font-size: 12.6px;
	line-height: 1.2;
  }

  .tax-metric .m-value {
	color: #000;
	font-size: 13.5px;
	margin: 5px 0px 8px;
	line-height: 1.2;
  }

  .panel-divider {
	position: relative;
	float: left;
	color: grey;
	font-size: 12px;
	text-align: center;
  }

  .panel-divider::before {
	content: "";
	position: absolute;
	left: 40px;
	right: 40px;
	top: 50%;
	height: 1px;
	border-bottom: 1px dashed grey;
	transform: translateY(-50%);
  }

  .panel-divider span {
	position: relative;
	padding: 0 10px;
	background: #fff;
  }

  .panel-divider.no-text {
	padding: 0px 40px;
  }

  /* Invoice panel (发票信息) */
  .invoice-title {
	padding: 18px 15px 6px;
	font-size: 12.6px;
	color: rgb(98, 101, 113);
	font-weight: bold;
  }

  .invoice-divider {
	height: 1px;
	border-bottom: 1px dashed gray;
	margin: 4px 10px;
	width: 85%;
  }

  .invoice-metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 14px;
	row-gap: 10px;
	padding: 8px 10px 6px;
  }

  .invoice-metric {
	display: grid;
	gap: 6px;
	align-content: start;
	min-height: 44px; /* keep right column alignment like screenshot */
  }

  .invoice-metric .m-label {
	color: #a9a2a8;
	font-size: 12.6px;
	line-height: 1.0rem;
  }

  .invoice-metric .m-value {
	color: #000;
	font-size: 13.5px;
	line-height: 1.2rem;
  }

  .invoice-note {
	padding: 6px 40px 0;
	color: #b6bcc8;
	font-size: 12px;
	text-align: center;
  }

  .invoice-report-title {
	padding: 14px 30px 10px;
	font-size: 13.5px;
	color: #333;
  }

  .invoice-report-table {
	width: calc(100% - 20px);
	margin: 0 10px 0px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13.5px;
	overflow: hidden;
	border-radius: 8px;
  }

  .invoice-report-table thead th {
	padding: 12px 10px;
	text-align: center;
	color: #413e41;
	background: #f3f7ff;
	font-weight: lighter;
	border: none;
  }

  .invoice-report-table tbody td {
	padding: 11px 10px;
	text-align: center;
	line-height: 22px;
	color: #333;
	border: none;
	background: #fff;
  }

  .invoice-report-table tbody tr:nth-child(even) td {
	background: #f6f9ff;
  }

  .invoice-report-table tbody tr.total-row td {
	background: #9fd2f3;
	color: #1f2937;
  }

  .finance-title {
	padding: 10px 40px 6px;
	float: left;
	width: 100%;
	font-size: 12.6px;
	color: rgb(98, 101, 113);
	font-weight: bold;
  }

  .finance-metrics {
	width: 100%;
	float: left;
	height: 100px;
	grid-template-columns: 1fr 1fr;
	gap: 18px 44px;
	padding: 8px 40px 20px;
  }

  .finance-metric {
	width: 50%;
	float: left;
	margin-bottom: 5px;
  }

  .finance-metric .m-label {
	color: #a9a2a8;
	font-size: 12.6px;
	line-height: 1.2;
  }

  .finance-metric .m-value {
	color: #000;
	font-size: 13.5px;
	line-height: 1.2;
	margin: 5px 0px 8px;
  }

  .latefee-title {
	float: left;
	width: 100%;
	padding: 14px 40px 10px;
	font-size: 11.7px;
	color: rgb(98, 101, 113);
	font-weight: bold;
  }

  .latefee-table {
	width: 90%;
	margin-left: 3%;
	border-collapse: collapse;
	font-size: 11.25px;
  }

  .latefee-table thead th {
	padding: 15px 30px;
	text-align: center;
	color: #626571;
	font-weight: 600;
	background: #f6f9ff;
  }

  .latefee-table tbody td {
	padding: 15px 30px;
	text-align: center;
	color: #626571
  }

  .latefee-table tbody tr:nth-child(even) td {
	background: #f6f9ff;
  }

  .latefee-extra.hidden {
	display: none;
  }

  .shuiwuchufa-extra.hidden {
	display: none;
  }

  .notice-box {
	margin: 0 40px 12px;
	padding: 10px 12px;
	border: 1px solid #cfe1ff;
	border-radius: 6px;
	background: #fff;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 2px 6px rgba(21, 101, 192, 0.1);
	border: 1px solid #007bff;
	-webkit-box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
	box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
	border-radius: 10px;
	padding: 10px;
	margin-top: 5px;
	margin-bottom: 10px;
	width: 90%;
	font-size: 1.4rem;
  }

  .notice-box .notice-text {
	flex: 1;
	font-size: 12.6px;
	line-height: 1.5;
  }

  .notice-box .notice-btn {
	background: #409eff;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 6px 10px;
	font-size: 12px;
	cursor: pointer;
	flex-shrink: 0;
  }

  /* Detail path modal */
  .jf-modal.hidden {
	display: none;
  }

  .jf-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 24px;
  }

  .jf-modal .jf-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.45);
  }

  .jf-modal .jf-modal-dialog {
	position: relative;
	width: min(600px, calc(100vw - 72px));
	height: auto;
	max-height: calc(100vh - 48px);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	display: flex;
	flex-direction: column;
  }

  .jf-modal .jf-modal-header {
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eef0f6;
  }

  .jf-modal .jf-modal-title {
	font-size: 14px;
	font-weight: 700;
	color: #1f2937;
  }

  .jf-modal .jf-modal-close {
	background: #2563eb;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	cursor: pointer;
  }

  .jf-modal .jf-modal-body {
	padding: 12px 16px 16px;
	overflow: auto;
	background: #fff;
  }

  .jf-detail {
	padding: 6px 2px 2px;
  }

  .jf-detail-title {
	font-size: 18px;
	font-weight: 800;
	color: #111827;
	margin: 8px 0 14px;
  }

  .jf-detail-row {
	display: flex;
	gap: 10px;
	margin: 12px 0;
	line-height: 1.6;
	color: #111827;
	font-size: 13px;
	word-break: break-word;
  }

  .jf-detail-row .k {
	white-space: nowrap;
  }

  .jf-step {
	margin: 10px 0 18px;
  }

  .jf-step-label {
	font-size: 14px;
	color: #333;
	margin: 8px 0 10px;
	text-align: center;
  }

  .jf-step img {
	width: auto;
	max-width: none;
	height: auto;
	display: block;
	border-radius: 10px;
	border: 1px solid #eef0f6;
	background: #f9fafb;
  }

  .punish-title {
	padding: 10px 40px 10px;
	color: #6b7280;
	font-size: 12px;
	font-weight: 600;
  }

  .punish-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	margin: 0 0 8px;
  }

  .punish-table thead th {
	padding: 12px 12px;
	font-size: 11.25px;
	text-align: center;
	width: 23%;
	color: #626571;
	font-weight: bold;
	background: #f6f9ff;
  }

  .punish-table tbody td {
	font-size: 11.25px;
	padding: 12px 12px;
	text-align: center;
	color: #626571;
  }

  .punish-table tbody tr:nth-child(even) td {
	background: #f6f9ff;
  }

  .punish-table a {
	color: #3d5afe;
	text-decoration: none;
	font-weight: 600;
  }

  .taxpaid-title {
	padding: 12px 40px 10px;
	color: #6b7280;
	font-size: 14px;
	font-weight: 600;
  }

  .taxpaid-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	margin: 0 0 4px;
  }

  .taxpaid-table thead th {
	padding: 12px 12px;
	text-align: center;
	color: #413e41;
	font-weight: lighter;
	background: #f6f9ff;
  }

  .taxpaid-table tbody td {
	padding: 12px 12px;
	text-align: center;
	color: #333;
  }

  .taxpaid-table tbody tr:nth-child(even) td {
	background: #f6f9ff;
  }

  .taxpaid-table tbody tr.taxpaid-total td {
	background: #bfe3ff;
	color: #333;
  }

  @media (max-width: 860px) {
	.tax-metrics {
	  grid-template-columns: 1fr;
	  padding: 16px 20px 1px;
	  gap: 14px;
	}

	.panel-divider {
	  width: 93%;
	  padding: 10px;
	}
	.panel-divider::before {
	  left: 20px;
	  right: 20px;
	}
	.finance-title {
	  padding: 10px 20px 6px;
	}
	.finance-metrics {
	  grid-template-columns: 1fr;
	  padding: 8px 20px 20px;
	  gap: 14px;
	}
	.latefee-title {
	  padding: 14px 20px 10px;
	}

	.notice-box {
	  margin: 0 20px 12px;
	}
	.punish-title {
	  padding: 10px 20px 10px;
	}
	.taxpaid-title {
	  padding: 12px 20px 10px;
	}
  }

  /* ===== INVOICE INFO ===== */
  .summary-block {
	border: 1px solid #e3e8f5;
	border-radius: 10px;
	padding: 18px 20px;
	margin-bottom: 20px;
  }

  .summary-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 14px;
  }

  .summary-cell {
	background: #f7f9ff;
	border-radius: 8px;
	padding: 14px 16px;
  }

  .s-label {
	font-size: 12px;
	color: #aaa;
	margin-bottom: 4px;
  }
  .s-value {
	font-size: 22px;
	font-weight: 700;
	color: #1565c0;
	letter-spacing: -0.5px;
  }
  .s-sub-label {
	font-size: 11px;
	color: #aaa;
	margin-top: 6px;
	margin-bottom: 2px;
  }
  .s-pct-up {
	font-size: 15px;
	font-weight: 700;
	color: #e53935;
  }
  .s-pct-down {
	font-size: 15px;
	font-weight: 700;
	color: #43a047;
  }
  .s-pct-gray {
	font-size: 14px;
	color: #888;
  }

  .big-total {
	text-align: center;
	font-size: 28px;
	font-weight: 800;
	color: #1a1a2e;
	padding: 4px 0 2px;
  }
  .big-total-label {
	text-align: center;
	font-size: 12px;
	color: #aaa;
  }

  /* Monthly table */
  .month-table-wrap {
	border: none;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 20px;
  }

  .month-table-header {
	display: grid;
	grid-template-columns: 60px 1fr 1fr 1fr;
	background: #e8f0fe;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	color: #1565c0;
	text-align: center;
  }

  .month-row {
	display: grid;
	grid-template-columns: 60px 1fr 1fr 1fr;
	padding: 9px 12px;
	font-size: 14px;
	text-align: center;
	border-top: none;
	color: #444;
  }

  .month-row:nth-child(odd) {
	background: #f7f9ff;
  }
  .month-row .zero {
	color: #ccc;
  }

  .month-total-row {
	display: grid;
	grid-template-columns: 60px 1fr 1fr 1fr;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	background: #e8f0fe;
	color: #1565c0;
	border-top: none;
  }

  /* ===== SUPPLIER INFO ===== */
  .fonsi[data-v-160009bc] {
		background-color: #2187fe;
		float: left;
		color: #fff;
		width: 25px;
		border-radius: 5px;
		text-align: center
	}
	[data-v-160009bc] {
		height: 22px;
		-ms-touch-action: none;
		touch-action: none;
		-ms-touch-action: pan-y;
		touch-action: pan-y
	}
	.separator[data-v-160009bc] {
		width: 100%;
		height: 10px;
		border-top: 1px dashed #ccc;
	}
  .section-sub-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
	color: #1a1a2e;
	padding: 10px 14px;
	border-radius: 6px;
	margin: 10px 0 0px;
  }

  .sup-table {
	width: 98%;
	border-collapse: collapse;
	font-size: 12.6px;
  }

  .sup-table th {
	background: #f6f9ff;
	padding: 10px 5px;
	text-align: center;
	color: #413e41;
	font-weight: lighter;
	border: none;
	white-space: nowrap;
  }

  .sup-table td {
	padding: 10px 5px;
	border: none;
	font-size: 11.7px;
	text-align: center;
	color: #333;
  }

  .sup-table tr:nth-child(even) td {
	background: #f7f9ff;
  }
  .td-left {
	text-align: center !important;
  }
  .td-red {
	color: rgb(255, 185, 78) !important;

  }

  .td-blue-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #1565c0;
	border-radius: 50%;
  }

  /* ===== PROMO FOOTER ===== */
  .promo-footer {
	padding: 0;
	background: transparent;
	border: none;
	display: block;
  }

  /* bottom wave decoration */
  .promo-footer::after {
	content: none;
  }

  .footer-image {
	display: block;
	padding: 5px;
	width: 100%;
	height: auto;
	max-width: none;
  }

  /* footer now uses a single image */
  .modal {
		  position: fixed;
		  z-index: 9999;
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100%;
		  overflow: auto;
		  background-color: rgba(0,0,0,0.8); /* 黑色背景 */
		}

		/* 模态内容框（图片容器） */
		.modal-content {
		  margin: auto;
		  display: block;
		  margin-top: 30%;
		  width: 80%;
		  max-width: 700px; /* 最大宽度 */
		}

		/* 图片动画效果 */
		.modal-content img {
		  animation-name: zoom;
		  animation-duration: 0.6s;
		}

		@keyframes zoom {
		  from {transform: scale(0)}
		  to {transform: scale(1)}
		}

		/* 模态框的基础样式 */
		.modal {
		  display: none; /* 默认隐藏 */
		  position: fixed;
		  z-index: 99;
		  left: 5%;
		  top: 20px;
		  width: 90%;
		  height: 50px;
		  border-radius: 4px;
		  background-color: #f0f9eb;
		  animation: scrollDown 1s infinite;
		  animation-duration: 1s;
			animation-iteration-count: 1;
			/* animation: slideUpAndHide 3s forwards;*/
		}

		@keyframes scrollDown {
			0% { top: 0; }
			100% { top: 20px; } /* 根据需要调整距离 */
		}
		@keyframes slideUpAndHide {
		  0% {
			transform: translateY(0);
			opacity: 1;
		  }
		  100% {
			transform: translateY(-100%); /* 或者任何你想要移动的距离 */
			opacity: 0;
		  }
		}

		.span-msg{
			margin-left: 5px;
			font-size: 12px;
			line-height: 50px;
			color: #66c23c;
		}

		.icon-ok{
			margin-left:10%;
		}