html, body {
 	background-color: #f5f4f4;
 	/* 浅绿色背景 */
 	font-family: Arial, sans-serif;
 	margin: 0;
 	padding: 0;
	max-width: 600px;
	margin: 0 auto;
 }

 a {
 	text-decoration: none;
 	/* 去除下划线 */
 	color: inherit;
 	/* 继承父元素的颜色 */
 	-webkit-tap-highlight-color: transparent;
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }

 a:focus {
 	outline: none;
 	/* 去除焦点状态的轮廓 */
 }

 a:hover {
 	text-decoration: none;
 	/* 去除悬停下划线 */
 	color: inherit;
 	/* 继承父元素的颜色 */
 }


 .body-ui {
 	height: auto;
	background-image: /* 白色到透明的过渡层（覆盖渐变底部） */ 
	linear-gradient(to bottom, transparent 0%, transparent 70%, #f5f5f5 95%, #f5f5f5 100%), 
	radial-gradient(circle at 0% 0%, #fff5f5 10%, #ffe0e0 22%, transparent 50%), 
	radial-gradient(circle at 100% 0%, #f0f8ff 15%, #e6f3ff 30%, transparent 65%), 
	radial-gradient(circle at 0% 100%, #f5f5ff 12%, #ecefff 25%, transparent 55%), 
	radial-gradient(circle at 100% 100%, #f0fff0 10%, #e8f5e8 23%, transparent 60%);
    background-size: 100%;
 	/* 顶部渐变背景 */
 	}

 .header {
 	/* display: flex; */
 	text-align: center;
 	padding: 20px 0 20px 0;
 }

 .custom-button {
 	/* 去除默认边框 */
 	border: none;
 	/* 去除默认背景色 */
 	background: none;
 	/* 去除默认的点击效果 */
 	outline: none;
 	/* 去除默认的鼠标点击效果 */
 	-webkit-tap-highlight-color: transparent;
 	/* 自定义按钮样式 */
 	font-size: 15px;
 	color: #000;
 	cursor: pointer;
 	float: right;
 	margin-right: 10px;
 }



 .user-info {
 	display: flex;
 	align-items: center;
 	margin: 0 0 20px 10px;
 }

 .user-avatar {
 	width: 60px;
 	height: 60px;
 	border-radius: 50%;
 	margin-right: 15px;
 	margin-left: 10px;
 	/* border: 1px solid #ccc; */
 }

 .user-details {
 	color: #333;
 	font-size: 16px;
 }

 .main {
    padding: 0px 10px 0 10px;
    /* background: linear-gradient(to bottom, #fff, #fff); */
    border-radius: 8px;
    background-color: #fff;
    padding: 10px;
    margin: 10px;
}

 .stats {
 	display: flex;
 	justify-content: space-between;
 	background: linear-gradient(to bottom, #fff, #fff);
 	/* 顶部渐变背景 */
 	border-radius: 8px;
 	line-height: 10px;
 	font-size: 15px;
 }

 .stat-item {
 	width: 33.33%;
 	text-align: center;
 	color: #696974;
 	font-size: 14px;
 }

 .stat-value {
 	color: #f92c2c;
 	font-size: 20px;
 	/* 可根据实际需求调整字体大小 */
 	font-weight: bold;
 	/* 让数字更醒目 */
 	margin-bottom: 20px;
 	/* 与下方文字的间距 */
 }

 .order-list {
 	list-style: none;
 	padding: 0;
 	margin: 0;
 }

 .order-item {
 	display: flex;
 	justify-content: space-between;
 	border-radius: 10px;
 	padding: 0px 10px 0px 10px;
 	/* border-bottom: 1px solid #ccc; */
 	background-color: #fff;
 	margin-top: 10px;
 	line-height: 5px;
 	font-size: 14px;
 }

 .order-details {
 	color: #8b8a8a;
 	/* margin-top: 50px; */
 }

 .order-djsd {
 	margin-top: 50px;
 }

 .order-dingdan {
 	color: #333;
 }

 .order-jiner {
 	color: #ff3434;
 	font-weight: bold;
 }

 .order-status {
 	color: green;
 	/* 绿色表示已支付 */
 	/* font-weight: bold; */
 	/*字体加粗*/
 }

 .no-data {
 	text-align: center;
 	color: #888;
 	font-size: 14px;
 	margin-top: 20px;
 }

 .navbar {
 	position: fixed;
 	top: 0;
 	width: 100%;
 	height: 45px;
 	/* 导航栏高度 */
 	background-color: #fff;
 	/* 背景色 */
 	z-index: 1000;
 	/* 确保导航栏在最上层 */
 	display: flex;
 	align-items: center;
 	border-bottom: 0.06rem solid #ebebeb;
	max-width: 600px;
	margin: 0 auto;
 }

 .back-button {
 	width: 20px;
 	height: 20px;
 	z-index: 99999;
 	margin-left: 10px;
 	position: fixed;
 }

 .left-arrow {
 	display: inline-block;
 	margin: 20px;
 	border-left: 1px solid;
 	border-bottom: 1px solid;
 	width: 10px;
 	height: 10px;
 	transform: rotate(45deg);

 }

 .title {
 	margin: auto;
 	z-index: 999;
 }

 .sidebar {
 	width: 100%;
 	background-color: #fff;
 	border-right: 1px solid #ddd;
 	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
 	display: flex;
 	flex-direction: column;
 	border-radius: 8px;
 	box-shadow: 0 0 20px #eae5ff;
 }

 .menu-item {
 	display: flex;
 	align-items: center;
 	padding: 14px;
 	cursor: pointer;
 	border-bottom: 1px solid #eee;
 	text-decoration: none;
 	color: #696974;
 }

 .menu-item:last-child {
 	border-bottom: none;
 }

 .menu-item-text {
 	flex-grow: 1;
 	margin-left: 8px;
 	font-size: 15px;
 }

 .menu-item-icon {
 	width: 20px;
 	height: 20px;
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
 	background-position: center;
 	margin-right: 8px;
 	/* 图标与文字间隔 */
 }

 /* 替换为实际图标路径 */
 .icon_1 {
 	background-image: url('../../result/images/ckdd.png');
 }

 .icon_2 {
 	background-image: url('../../result/images/rwsh.png');
 }

 .icon_3 {
 	background-image: url('../../result/images/fkjl.png');
 }

 .icon_4 {
 	background-image: url('../../result/images/mbsz.png');
 }

 .icon_5 {
 	background-image: url('../../result/images/zfsz.png');
 }
 
.icon_6 {
 	background-image: url('../../result/images/fhsz.png');
 }

 .icon_7 {
 	background-image: url('../../result/images/xtsz.png');
 }

 .icon_8 {
 	background-image: url('../../result/images/tcdl.png');
 }

 .icon_9 {
 	background-image: url('../../result/images/qtsz.png');
 }

 .icon_10 {
 	background-image: url('../../result/images/fxgl.png');
 }

 .icon_11 {
 	background-image: url('../../result/images/yqhy.png');
 }

 .icon_12 {
 	background-image: url('../../result/images/wdtd.png');
 }
 .menu-arrow {
 	display: inline-block;
 	border-left: 1px solid #696974;
 	border-bottom: 1px solid #696974;
 	width: 10px;
 	height: 10px;
 	transform: rotate(225deg);
 	margin-right: 10px;
 }

 .logout-button {
 	margin-top: auto;
 	padding: 10px;
 	background-color: #448fff;
 	color: white;
 	border: none;
 	border-radius: 5px;
 	cursor: pointer;
 	font-size: 16px;
 	width: 100%;
 	text-align: center;
 	margin-top: 20px;
 }

 .logout-button:hover {
 	background-color: #357ab7;
 }

 .statistics {
 	display: flex;
 	justify-content: space-around;
 }

 .statistics1 {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	width: 100%;
 }

 .statistics1 p {
 	flex: 1;
 	text-align: center;
 	font-size: 14px;
 	line-height: 1px;
 }

 .statistics p {
 	flex: 1;
 	text-align: center;
 	font-size: 14px;
 	line-height: 1px;
 }

 .pagination {
 	display: flex;
 	justify-content: center;
 	margin-top: 10px;
 }

 .pagination a {
 	border: 1px solid #ccc;
 	padding: 5px 10px;
 	margin: 0 5px;
 	text-decoration: none;
 	color: #777;
 	border-radius: 5px;
 	transition: background-color 0.3s;
 	font-size: 14px;
 	margin-bottom: 30px;
 }

 .pagination a:hover {
 	background-color: #f0f0f0;
 }


 /* 订单详情 */

 /* 内容容器样式 */
 .content-container {
 	padding: 10px;
 	/* box-shadow: 0 0 20px #b3baf2; */
 }

 .order_kls {
 	background-color: #fff;
 	border-radius: 8px;
 	font-size: 14px;
 	margin-bottom: 5px;
 	box-shadow: 0 0 20px #d8f3fe;
 }

 .order-hrsk {
 	padding: 5px 10px 5px 10px;
 	border-bottom: 0.06rem solid #ddd;
 	color: #777;
 	overflow: auto;
 	/* 清除浮动 */
 }

 .order-item_yup {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	padding: 5px 10px 5px 10px;
 }

 .order-item_yup:last-child {
 	border-bottom: none;
 }

 .order-status {
 	color: green;
 	/* font-weight: bold; */
 }

 .order-info {
 	display: flex;
 	flex-direction: column;
 	line-height: 22px;
 	color: #777;
 }

 .amount {
 	color: red;
 	font-size: 20px;
 	text-align: right;
 }

 .amount_yzf {
 	color: red;
 	font-size: 14px;
 	text-align: right;
 }

 .info-name {
 	margin-right: 5px;
 }

 .info-content {
 	color: #333;
 }

 .info-conuie {
 	float: right;
 	color: green;
 }

 .info-conuie img {
 	width: 14px;
 	height: 14px;
 	margin-top: 3px;
 }

 .opiu {
 	color: #777;
 }

 .opiuyr {
 	font-size: 14px;
 }


 /* 悬浮删除按钮*/
 .more-button {
 	position: fixed;
 	right: 5px;
 	bottom: 20%;
 	width: 40px;
 	height: 40px;
 	background-color: rgba(128, 128, 128, 0.4);
 	border-radius: 50%;
 	border: none;
 	padding: 0;
 	overflow: hidden;
 	z-index: 9999;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }

 .more-button img {
 	max-width: 70%;
 	max-height: 70%;
 }

 /* 弹窗样式 */
 .custom-modal {
 	display: none;
 	position: fixed;
 	z-index: 1000;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	overflow: auto;
 	background-color: rgba(0, 0, 0, 0.4);
 }

 .modal-content {
 	background-color: #fff;
 	margin: 15% auto;
 	padding: 20px;
 	border: 1px solid #ddd;
 	border-radius: 8px;
 	width: 200px;
 	text-align: center;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

 .modal-content p {
 	font-size: 14px;
 }

 .modal-content2 {
 	background-color: #fff;
 	margin: 15% auto;
 	padding: 10px;
 	border: 1px solid #ddd;
 	border-radius: 8px;
 	width: 120px;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 	text-align: center;
 	/* 让内容水平居中 */
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 }

 .modal-content2 img {
 	margin-top: 10px;
 	width: 40px;
 	height: 40px;
 }

 .modal-content2 p {
 	font-size: 14px;
 }

 .modal-button {
 	padding: 8px 20px;
 	margin: 5px;
 	border: none;
 	border-radius: 5px;
 	cursor: pointer;
 	font-size: 14px;
 }

 .modal-button.confirm {
 	background-color: #007BFF;
 	color: white;
 }

 .modal-button.cancel {
 	background-color: #FF6B6B;
 	color: white;
 }

 .modal-button.close {
 	background-color: #28A745;
 	color: white;
 }


 /* 清除缓存 */
 .imageInfo {
 	margin: 10px;
 	padding: 20px;
 	background-color: #fff;
 	border-radius: 8px;
 }

 .qctx {
 	font-size: 14px;
 	color: #ff4d4f;
 }

 .tpdx {
 	font-size: 14px;
 	color: #666;
 }
.tpdx-py{
	font-size: 14px;
	color: #8b8b8b;
	margin-top: 30px;
}
.tpdx span{
	color: #333;
}
 .button-containerhk {
 	text-align: center;
 }

.button-qc {
 	width: 80%;
 	padding: 10px;
 	background-color: #ff4d4f;
 	;
 	color: #fff;
 	border: none;
 	border-radius: 20px;
 	cursor: pointer;
 	margin-top: 40px;
	margin-bottom: 20px;
 }

/* =========================================================
   听风资源库主站商业视觉系统
   ========================================================= */
:root {
	--tf-navy: #071a38;
	--tf-navy-2: #0d2d58;
	--tf-blue: #2478e5;
	--tf-gold: #e7bf67;
	--tf-gold-soft: #fff0b5;
	--tf-bg: #eef3f9;
	--tf-panel: #ffffff;
	--tf-ink: #14243a;
	--tf-muted: #718096;
	--tf-line: #dce6f2;
	--tf-danger: #c74444;
	--tf-success: #16845a;
	--tf-shadow: 0 14px 38px rgba(12, 42, 78, .10);
}

html,
body {
	max-width: none;
	min-height: 100%;
	margin: 0;
	background: var(--tf-bg);
	color: var(--tf-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

body.tf-admin-page {
	background:
		radial-gradient(circle at 82% -5%, rgba(36,120,229,.22), transparent 28%),
		linear-gradient(180deg, var(--tf-navy) 0, var(--tf-navy-2) 330px, var(--tf-bg) 330px);
}

.navbar,
.tf-admin-nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	max-width: none;
	height: 58px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	color: #fff;
	background: rgba(7, 26, 56, .96);
	border-bottom: 1px solid rgba(231, 191, 103, .22);
	box-shadow: 0 8px 28px rgba(5, 20, 42, .18);
	backdrop-filter: blur(16px);
}

.navbar .title {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.navbar .left-arrow {
	color: var(--tf-gold-soft);
}

.tf-admin-nav {
	justify-content: space-between;
	padding: 0 max(18px, calc((100% - 1160px) / 2));
}

.tf-admin-nav > div {
	text-align: center;
	line-height: 1.15;
}

.tf-admin-nav strong {
	display: block;
	font-size: 16px;
}

.tf-admin-nav small {
	display: block;
	margin-top: 4px;
	color: #91a8c4;
	font-size: 9px;
	letter-spacing: 1.4px;
}

.tf-nav-back {
	width: 40px;
	font-size: 35px;
	line-height: 1;
	color: var(--tf-gold-soft);
}

.tf-nav-link {
	min-width: 40px;
	color: var(--tf-gold-soft);
	font-size: 13px;
}

.tf-admin-shell {
	width: min(1160px, calc(100% - 28px));
	margin: 0 auto;
	padding: 26px 0 46px;
}

.tf-admin-hero {
	min-height: 185px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 32px;
	box-sizing: border-box;
	color: #fff;
	background:
		radial-gradient(circle at 84% 18%, rgba(87,158,255,.34), transparent 24%),
		linear-gradient(135deg, rgba(8,31,65,.98), rgba(13,53,101,.96));
	border: 1px solid rgba(231,191,103,.38);
	border-radius: 26px;
	box-shadow: 0 22px 64px rgba(3, 18, 39, .28);
}

.tf-admin-hero.compact {
	min-height: 155px;
}

.tf-admin-hero h1 {
	margin: 7px 0 8px;
	font-size: clamp(25px, 4vw, 38px);
	letter-spacing: 1px;
}

.tf-admin-hero p {
	margin: 0;
	color: #b8c9dd;
}

.tf-kicker {
	color: var(--tf-gold);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.8px;
}

.tf-summary-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0;
}

.tf-summary-grid article {
	min-height: 84px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 15px 17px;
	box-sizing: border-box;
	background: rgba(255,255,255,.98);
	border: 1px solid rgba(220,230,242,.9);
	border-radius: 17px;
	box-shadow: var(--tf-shadow);
}

.tf-summary-grid span {
	color: var(--tf-muted);
	font-size: 12px;
}

.tf-summary-grid b {
	margin-top: 6px;
	color: var(--tf-navy-2);
	font-size: 24px;
}

.tf-panel {
	margin: 16px 0;
	padding: 22px;
	background: rgba(255,255,255,.98);
	border: 1px solid var(--tf-line);
	border-radius: 21px;
	box-shadow: var(--tf-shadow);
}

.tf-panel-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
}

.tf-panel-heading h2 {
	margin: 5px 0 0;
	font-size: 20px;
}

.tf-panel-heading p {
	margin: 0;
	color: var(--tf-muted);
	font-size: 12px;
}

.tf-form-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 13px;
	align-items: end;
}

.tf-form-grid label,
.tf-field {
	display: block;
}

.tf-form-grid label > span,
.tf-field > span {
	display: block;
	margin: 0 0 7px 2px;
	color: #4b5d73;
	font-size: 12px;
	font-weight: 700;
}

.tf-form-grid input,
.tf-form-grid select,
.tf-field input,
.tf-field select,
.tf-field textarea,
.tf-search input {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	box-sizing: border-box;
	color: var(--tf-ink);
	background: #f9fbfe;
	border: 1px solid var(--tf-line);
	border-radius: 11px;
	outline: none;
	font: inherit;
}

.tf-form-grid input:focus,
.tf-form-grid select:focus,
.tf-field input:focus,
.tf-field select:focus,
.tf-search input:focus {
	border-color: var(--tf-blue);
	box-shadow: 0 0 0 3px rgba(36,120,229,.12);
}

.tf-btn {
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 11px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.tf-btn:hover {
	transform: translateY(-1px);
}

.tf-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

.tf-btn-primary {
	color: #fff;
	background: var(--tf-blue);
	box-shadow: 0 8px 18px rgba(36,120,229,.22);
}

.tf-btn-gold {
	color: #3b2a0c;
	background: linear-gradient(110deg, #d2a74d, var(--tf-gold-soft), #c38e2e);
	box-shadow: 0 8px 22px rgba(231,191,103,.25);
}

.tf-btn-ghost {
	color: #28577e;
	background: #f1f6fc;
	border-color: #cdddeb;
}

.tf-btn-warn {
	color: #9a5417;
	background: #fff5e7;
	border-color: #f2c57d;
}

.tf-btn-success {
	color: #116d48;
	background: #eaf8f1;
	border-color: #9cd8b8;
}

.tf-btn-danger {
	color: #a32d2d;
	background: #fff0f0;
	border-color: #efb4b4;
}

.tf-filter-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 18px;
}

.tf-search {
	flex: 1;
	display: flex;
	gap: 9px;
}

.tf-search input {
	max-width: 480px;
}

.tf-search .tf-btn {
	min-width: 64px;
	white-space: nowrap;
}

.tf-quick-links {
	display: flex;
	gap: 13px;
	color: var(--tf-blue);
	font-size: 13px;
}

.agent-card-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px;
}

.agent-card {
	padding: 18px;
	background: rgba(255,255,255,.99);
	border: 1px solid var(--tf-line);
	border-radius: 20px;
	box-shadow: var(--tf-shadow);
}

.agent-card-head {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.agent-card-head > img {
	width: 60px;
	height: 60px;
	flex: 0 0 auto;
	object-fit: cover;
	background: var(--tf-navy);
	border: 2px solid #f0d58f;
	border-radius: 17px;
}

.agent-identity {
	min-width: 0;
	flex: 1;
}

.agent-identity h3 {
	margin: 0 0 4px;
	font-size: 17px;
}

.agent-identity p {
	margin: 3px 0;
	overflow: hidden;
	color: var(--tf-muted);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.agent-identity strong {
	color: var(--tf-navy-2);
	letter-spacing: .4px;
}

.agent-tags {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.tf-status,
.tf-level-tag {
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 10px;
	white-space: nowrap;
}

.tf-status {
	color: #147347;
	background: #eaf8f0;
}

.tf-status.is-banned {
	color: #a83333;
	background: #ffecec;
}

.tf-level-tag {
	color: #775313;
	background: #fff5d9;
	border: 1px solid #f0d68f;
}

.agent-card-data {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 16px 0 10px;
}

.agent-card-data > div {
	min-width: 0;
	padding: 10px;
	background: #f4f8fc;
	border-radius: 11px;
}

.agent-card-data span,
.agent-card-data b {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.agent-card-data span {
	color: var(--tf-muted);
	font-size: 10px;
}

.agent-card-data b {
	margin-top: 4px;
	color: #1b385a;
	font-size: 12px;
}

.agent-register-time {
	margin: 0 0 12px;
	color: #8995a5;
	font-size: 11px;
}

.agent-card-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding-top: 13px;
	border-top: 1px solid #e9eef4;
}

.agent-card-actions form,
.agent-card-actions .tf-btn {
	width: 100%;
}

.tf-empty {
	grid-column: 1 / -1;
	padding: 44px;
	text-align: center;
	color: var(--tf-muted);
	background: #fff;
	border-radius: 18px;
}

.tf-admin-footer {
	padding: 30px 0 12px;
	text-align: center;
	color: #7f8ea0;
	font-size: 11px;
	line-height: 1.8;
}

/* 旧后台页面统一升级 */
.main,
.sidebar,
.content-container,
.imageInfo,
.order_kls {
	border: 1px solid var(--tf-line);
	border-radius: 18px;
	box-shadow: var(--tf-shadow);
}

.body-ui,
body > .main,
body > .content-container,
body > .imageInfo {
	width: min(1160px, calc(100% - 20px));
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.main {
	padding: 18px;
}

.section-title {
	color: var(--tf-ink);
	font-weight: 800;
}

.stat-value {
	color: var(--tf-blue);
}

.menu-grid-item {
	border: 1px solid transparent;
	border-radius: 14px;
}

.menu-grid-item:hover {
	background: #edf5ff;
	border-color: #caddf3;
	box-shadow: 0 8px 20px rgba(29,79,133,.08);
}

@media (max-width: 820px) {
	.tf-admin-shell { width: min(100% - 20px, 720px); padding-top: 16px; }
	.tf-summary-grid { grid-template-columns: repeat(3, 1fr); }
	.tf-form-grid { grid-template-columns: repeat(2, 1fr); }
	.agent-card-list { grid-template-columns: 1fr; }
	.tf-admin-hero { min-height: 145px; padding: 22px; border-radius: 21px; }
}

@media (max-width: 640px) {
	.tf-filter-panel { display: block; }
	.tf-search { display: grid; grid-template-columns: 1fr auto; }
	.tf-search input { grid-column: 1 / -1; max-width: none; }
	.tf-quick-links { margin-top: 12px; align-items: center; justify-content: flex-end; }
}

@media (max-width: 560px) {
	body.tf-admin-page {
		background: linear-gradient(180deg, var(--tf-navy) 0, var(--tf-navy-2) 240px, var(--tf-bg) 240px);
	}
	.tf-admin-nav { padding: 0 12px; }
	.tf-admin-hero { min-height: 132px; padding: 19px; }
	.tf-admin-hero h1 { font-size: 25px; }
	.tf-hero-actions { display: none; }
	.tf-summary-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
	.tf-summary-grid article { min-height: 70px; padding: 10px; border-radius: 13px; }
	.tf-summary-grid b { font-size: 19px; }
	.tf-panel { padding: 16px; border-radius: 17px; }
	.tf-panel-heading { display: block; }
	.tf-panel-heading p { margin-top: 7px; }
	.tf-form-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.tf-form-grid .tf-btn { grid-column: 1 / -1; }
	.tf-quick-links { margin-top: 13px; justify-content: flex-end; }
	.agent-card { padding: 14px; border-radius: 17px; }
	.agent-card-head > img { width: 48px; height: 48px; border-radius: 14px; }
	.agent-card-data { grid-template-columns: repeat(2, 1fr); }
	.agent-card-actions { grid-template-columns: repeat(2, 1fr); }
	.agent-card-actions .tf-btn { min-height: 38px; padding: 0 8px; font-size: 12px; }
}