/* ============================================================
   临权控制台 · 设计令牌 (Design Tokens)
   主题：深色高端安全控制台 / 商用 SaaS
   ============================================================ */
:root {
	color-scheme: dark;
	--bg0: #060A13;
	/* 页面最底 */
	--bg1: #0A1020;
	/* 侧栏 / 顶栏 */
	--bg2: #0D1526;
	/* 内容底 */
	--panel: rgba(19, 28, 50, .62);
	/* 卡片 */
	--panel-strong: #121B31;
	--line: rgba(151, 167, 209, .14);
	--line-strong: rgba(151, 167, 209, .26);
	--txt: #EBF0FB;
	--txt2: #9DAACA;
	--txt3: #6A7796;
	--accent: #3D8BFF;
	--accent2: #2FE0CB;
	--grad: linear-gradient(135deg, #3D8BFF 0%, #2FE0CB 100%);
	--success: #3FD08A;
	--warn: #F0B34C;
	--danger: #F36B6B;
	--gold: #E4B95B;
	--radius: 16px;
	--radius-sm: 12px;
	--sidebar: 248px;
	--shadow: 0 18px 50px -24px rgba(0, 0, 0, .65);
	--mono: "SF Mono", "Cascadia Code", "JetBrains Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace;
	--sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
	--disp: "Space Grotesk", "Noto Sans SC", var(--sans);
}

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

html {
	-webkit-text-size-adjust: 100%
}

body {
	font-family: var(--sans);
	background:
		radial-gradient(1200px 600px at 78% -10%, rgba(61, 139, 255, .10), transparent 60%),
		radial-gradient(900px 500px at -10% 30%, rgba(47, 224, 203, .07), transparent 55%),
		var(--bg0);
	color: var(--txt);
	min-height: 100vh;
	font-size: 15px;
	line-height: 1.6;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px
}

::-webkit-scrollbar-thumb {
	background: #1c2742;
	border-radius: 6px
}

::-webkit-scrollbar-thumb:hover {
	background: #26355a
}

::-webkit-scrollbar-track {
	background: transparent
}

::selection {
	background: rgba(61, 139, 255, .35)
}

a {
	color: inherit;
	text-decoration: none
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit
}

input,
select,
textarea {
	font-family: inherit;
	color: var(--txt)
}

.mono {
	font-family: var(--mono)
}

/* ============================================================
   布局骨架 Layout
   ============================================================ */
.app {
	display: flex;
	min-height: 100vh
}

/* ---------- 侧栏 Sidebar ---------- */
.sidebar {
	width: var(--sidebar);
	flex: 0 0 var(--sidebar);
	background: linear-gradient(180deg, var(--bg1) 0%, #0b1226 100%);
	border-right: 1px solid var(--line);
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 22px 20px 18px
}

.brand-mark {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 11px;
	background: var(--grad);
	display: grid;
	place-items: center;
	box-shadow: 0 6px 18px -6px rgba(61, 139, 255, .7);
}

.brand-mark svg {
	width: 22px;
	height: 22px
}

.brand-name {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: .5px;
	line-height: 1.15
}

.brand-sub {
	font-size: 11px;
	color: var(--txt3);
	letter-spacing: 1.5px;
	margin-top: 1px
}

.nav {
	padding: 10px 14px;
	flex: 1
}

.nav-label {
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--txt3);
	padding: 10px 12px 8px;
	font-weight: 600
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 11px;
	color: var(--txt2);
	font-weight: 500;
	font-size: 14.5px;
	margin-bottom: 3px;
	transition: background .18s, color .18s;
	position: relative;
}

.nav-item svg {
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
	opacity: .85
}

.nav-item:hover {
	background: rgba(61, 139, 255, .10);
	color: var(--txt)
}

.nav-item.active {
	background: linear-gradient(90deg, rgba(61, 139, 255, .18), rgba(47, 224, 203, .10));
	color: #fff;
}

.nav-item.active::before {
	content: "";
	position: absolute;
	left: -14px;
	top: 20%;
	bottom: 20%;
	width: 3px;
	border-radius: 2px;
	background: var(--grad);
}

.nav-item .count {
	margin-left: auto;
	font-size: 11.5px;
	font-family: var(--mono);
	background: rgba(151, 167, 209, .12);
	padding: 2px 8px;
	border-radius: 20px;
	color: var(--txt2)
}

.nav-item.active .count {
	background: rgba(61, 139, 255, .25);
	color: #cfe0ff
}

/* 会员卡（前端预留：商业模式落地） */
.vip {
	margin: 8px 14px 12px;
	padding: 16px;
	border-radius: var(--radius-sm);
	background: linear-gradient(160deg, rgba(228, 185, 91, .16), rgba(228, 185, 91, .04));
	border: 1px solid rgba(228, 185, 91, .28);
	position: relative;
	overflow: hidden;
}

.vip::after {
	content: "";
	position: absolute;
	right: -22px;
	top: -22px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(228, 185, 91, .28), transparent 70%)
}

.vip-title {
	font-weight: 700;
	font-size: 14px;
	color: #f6e3b6;
	display: flex;
	align-items: center;
	gap: 7px
}

.vip-title svg {
	width: 15px;
	height: 15px
}

.vip-desc {
	font-size: 12px;
	color: #c9b488;
	margin: 6px 0 11px;
	line-height: 1.5
}

.vip-progress {
	height: 6px;
	border-radius: 6px;
	background: rgba(228, 185, 91, .15);
	overflow: hidden;
	margin-bottom: 12px
}

.vip-progress>i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #E4B95B, #F4CE7C);
	border-radius: 6px;
	transition: width .4s
}

.vip-btn {
	width: 100%;
	padding: 8px 0;
	border-radius: 9px;
	background: linear-gradient(90deg, #E4B95B, #F0C97E);
	color: #2a1f0a;
	font-weight: 700;
	font-size: 13.5px;
	transition: filter .18s;
}

.vip-btn:hover {
	filter: brightness(1.08)
}

.sidebar-foot {
	padding: 14px 18px;
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	gap: 11px
}

.avatar {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, #3D8BFF, #6a5cff);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 14px;
	color: #fff
}

.foot-name {
	font-size: 13.5px;
	font-weight: 600
}

.foot-role {
	font-size: 11.5px;
	color: var(--txt3)
}

/* ---------- 主区 Main ---------- */
.main {
	flex: 1;
	margin-left: var(--sidebar);
	min-width: 0;
	display: flex;
	flex-direction: column
}

.app.hidden {
	display: none
}

/* 兜底：只要登录页可见，应用主体一律隐藏，避免后台内容外露 */
body:has(.login-screen:not(.hidden)) .app {
	display: none
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	backdrop-filter: blur(12px);
	background: rgba(9, 15, 28, .72);
	border-bottom: 1px solid var(--line);
	padding: 0 28px;
	height: 66px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.hamburger {
	display: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	color: var(--txt2)
}

.hamburger:hover {
	background: rgba(151, 167, 209, .1)
}

.hamburger svg {
	width: 22px;
	height: 22px
}

.top-title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .3px
}

.top-title .sub {
	display: block;
	font-size: 11px;
	font-weight: 500;
	color: var(--txt3);
	letter-spacing: 1px
}

.top-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px
}

.top-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: 10px;
	border: 1px solid var(--line-strong);
	color: var(--txt2);
	font-size: 13.5px;
	font-weight: 500;
	transition: all .18s;
	background: rgba(151, 167, 209, .05);
}

.top-btn svg {
	width: 16px;
	height: 16px
}

.top-btn:hover {
	background: rgba(151, 167, 209, .12);
	color: var(--txt);
	border-color: rgba(151, 167, 209, .4)
}

.top-btn.primary {
	background: var(--grad);
	border: none;
	color: #06201b;
	font-weight: 700
}

.top-btn.primary:hover {
	filter: brightness(1.1)
}

.top-btn.primary svg {
	width: 16px;
	height: 16px
}

.search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(151, 167, 209, .07);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 0 12px;
	height: 40px;
	width: 220px
}

.search svg {
	width: 16px;
	height: 16px;
	color: var(--txt3)
}

.search input {
	background: none;
	border: none;
	outline: none;
	width: 100%;
	font-size: 13.5px
}

.search input::placeholder {
	color: var(--txt3)
}

.content {
	padding: 28px;
	flex: 1
}

.view {
	display: none;
	animation: fade .3s ease
}

.view.active {
	display: block
}

@keyframes fade {
	from {
		opacity: 0;
		transform: translateY(8px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

/* 页首块 */
.page-head {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap
}

.page-head h2 {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: .3px;
	font-family: var(--disp)
}

.page-head p {
	color: var(--txt3);
	font-size: 13.5px;
	margin-top: 3px
}

/* 遮罩层 */
.mask {
	position: fixed;
	inset: 0;
	background: rgba(3, 6, 12, .6);
	backdrop-filter: blur(3px);
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s
}

.mask.show {
	opacity: 1;
	pointer-events: auto
}

/* ============================================================
   仪表盘 Dashboard
   ============================================================ */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 22px
}

.stat-card {
	position: relative;
	overflow: hidden;
	padding: 20px;
	border-radius: var(--radius);
	background: linear-gradient(165deg, var(--panel), rgba(19, 28, 50, .30));
	border: 1px solid var(--line);
	transition: transform .2s, border-color .2s;
}

.stat-card:hover {
	transform: translateY(-3px);
	border-color: var(--line-strong)
}

.stat-card .ico {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	margin-bottom: 14px
}

.stat-card .ico svg {
	width: 21px;
	height: 21px
}

.stat-card .num {
	font-family: var(--disp);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1
}

.stat-card .lbl {
	color: var(--txt3);
	font-size: 13px;
	margin-top: 8px
}

.stat-card .delta {
	position: absolute;
	top: 20px;
	right: 18px;
	font-size: 12px;
	padding: 3px 9px;
	border-radius: 20px;
	font-weight: 600
}

.ico-blue {
	background: rgba(61, 139, 255, .16);
	color: #8db6ff
}

.ico-teal {
	background: rgba(47, 224, 203, .14);
	color: #5fe6d2
}

.ico-gold {
	background: rgba(228, 185, 91, .15);
	color: #f0cf8d
}

.ico-rose {
	background: rgba(243, 107, 107, .15);
	color: #f79a9a
}

.ico-violet {
	background: rgba(120, 104, 255, .16);
	color: #a69bff
}

.ico-green {
	background: rgba(63, 208, 138, .14);
	color: #6bdcab
}

.dash-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 16px;
	margin-bottom: 22px
}

.panel {
	background: linear-gradient(165deg, var(--panel), rgba(19, 28, 50, .28));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
}

.panel-h {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px
}

.panel-h h3 {
	font-size: 16px;
	font-weight: 700
}

.panel-h .tag {
	margin-left: auto;
	font-size: 11.5px;
	color: var(--txt3);
	border: 1px solid var(--line);
	padding: 3px 10px;
	border-radius: 20px
}

/* 到期提醒列表 */
.recent-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 4px;
	border-bottom: 1px solid var(--line)
}

.recent-item:last-child {
	border-bottom: none
}

.recent-item .type-ico {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: rgba(151, 167, 209, .1);
	color: var(--txt2)
}

.recent-item .type-ico svg {
	width: 19px;
	height: 19px
}

.recent-item .meta {
	flex: 1;
	min-width: 0
}

.recent-item .meta .t {
	font-weight: 600;
	font-size: 14px
}

.recent-item .meta .r {
	font-size: 12px;
	color: var(--txt3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.recent-item .cd {
	font-family: var(--mono);
	font-size: 13px
}

.recent-item .cd.warn {
	color: var(--warn)
}

.recent-item .cd.danger {
	color: var(--danger)
}

.recent-item .cd.ok {
	color: var(--success)
}

.recent-item .st {
	padding: 3px 9px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 600
}

.badge-active {
	background: rgba(63, 208, 138, .14);
	color: #6bdcab
}

.badge-expired {
	background: rgba(151, 167, 209, .12);
	color: var(--txt2)
}

.badge-revoked {
	background: rgba(243, 107, 107, .14);
	color: #f79a9a
}

/* 预留：设备监控 */
.device-slot {
	border: 1px dashed rgba(151, 167, 209, .3);
	border-radius: var(--radius-sm);
	padding: 18px;
	text-align: center;
	color: var(--txt3)
}

.device-slot .slot-ico {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(151, 167, 209, .08);
	display: grid;
	place-items: center;
	margin: 0 auto 10px
}

.device-slot .slot-ico svg {
	width: 22px;
	height: 22px
}

.device-slot .slot-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--txt2)
}

.device-slot .slot-desc {
	font-size: 12px;
	margin-top: 4px;
	line-height: 1.5
}

.device-slot .slot-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 11.5px;
	padding: 4px 11px;
	border-radius: 20px;
	border: 1px solid var(--line);
	color: var(--txt3)
}

.device-slot .slot-pill i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 3px rgba(228, 185, 91, .18);
	animation: pulse 2s infinite
}

@keyframes pulse {
	50% {
		opacity: .4
	}
}

/* 配额条 */
.quota {
	margin-bottom: 22px;
	padding: 16px 20px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: rgba(61, 139, 255, .05);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap
}

.quota .q-l {
	flex: 1;
	min-width: 220px
}

.quota .q-t {
	font-weight: 700;
	font-size: 14.5px
}

.quota .q-s {
	font-size: 12.5px;
	color: var(--txt3);
	margin-top: 2px
}

.quota .bar {
	height: 8px;
	border-radius: 8px;
	background: rgba(151, 167, 209, .12);
	overflow: hidden;
	margin-top: 10px;
	max-width: 340px
}

.quota .bar>i {
	display: block;
	height: 100%;
	background: var(--grad);
	border-radius: 8px;
	transition: width .4s
}

.quota .q-num {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--txt2);
	white-space: nowrap
}

.quota .q-num b {
	color: var(--txt);
	font-size: 15px
}

/* ============================================================
   新建授权 Create
   ============================================================ */
.create-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 16px;
	align-items: start
}

.field {
	margin-bottom: 18px
}

.field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--txt2);
	margin-bottom: 8px
}

.field label .req {
	color: var(--danger)
}

.field .hint {
	font-size: 12px;
	color: var(--txt3);
	margin-top: 6px
}

.control {
	width: 100%;
	padding: 12px 14px;
	border-radius: 11px;
	background: rgba(151, 167, 209, .05);
	border: 1px solid var(--line);
	font-size: 14.5px;
	outline: none;
	transition: border-color .18s;
}

.control:focus {
	border-color: rgba(61, 139, 255, .6);
	box-shadow: 0 0 0 3px rgba(61, 139, 255, .12)
}

.control::placeholder {
	color: var(--txt3)
}

select.control {
	appearance: none;
	color-scheme: dark;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%239DAACA" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 38px
}

select.control option {
	background: #0f1a30;
	color: #c5d0e6;
	padding: 9px 14px;
	font-size: 14px
}

select.control option:hover,
select.control option:focus {
	background: rgba(61, 139, 255, .16);
	color: #ffffff
}

select.control option:checked {
	background: rgba(61, 139, 255, .28);
	color: #ffffff
}

/* ============================================================
   自定义下拉（替代原生 select 弹窗，避免白边/白滚动条）
   ============================================================ */
.dd {
	position: relative
}

.dd-original {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none
}

.dd-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	background: rgba(151, 167, 209, .05);
	border: 1px solid var(--line);
	border-radius: 11px;
	color: var(--txt);
	font-size: 14.5px;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
	transition: border-color .18s, background .18s
}

.dd-trigger:hover {
	border-color: var(--line-strong)
}

.dd.open .dd-trigger {
	border-color: rgba(61, 139, 255, .6);
	box-shadow: 0 0 0 3px rgba(61, 139, 255, .12)
}

.dd-label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.dd-chevron {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	color: var(--txt3);
	transition: transform .18s
}

.dd.open .dd-chevron {
	transform: rotate(180deg)
}

.dd-panel {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 280px;
	overflow-y: auto;
	background: #0f1a30;
	border: 1px solid var(--line-strong);
	border-radius: 11px;
	box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .75);
	z-index: 100;
	padding: 6px
}

.dd.open .dd-panel {
	display: block
}

.dd-option {
	padding: 9px 12px;
	border-radius: 7px;
	font-size: 14px;
	color: #c5d0e6;
	cursor: pointer;
	transition: background .12s, color .12s
}

.dd-option:hover {
	background: rgba(61, 139, 255, .16);
	color: #ffffff
}

.dd-option.sel {
	background: rgba(61, 139, 255, .28);
	color: #ffffff;
	font-weight: 600
}

.dd-panel::-webkit-scrollbar {
	width: 8px
}

.dd-panel::-webkit-scrollbar-track {
	background: transparent
}

.dd-panel::-webkit-scrollbar-thumb {
	background: #1c2742;
	border-radius: 4px
}

.dd-panel::-webkit-scrollbar-thumb:hover {
	background: #2a3a5e
}

textarea.control {
	resize: vertical;
	min-height: 76px
}

.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px
}

.custom-input {
	display: none;
	margin-top: 10px;
	animation: fade .2s
}

.custom-input.show {
	display: block
}

.chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.chip {
	padding: 9px 16px;
	border-radius: 10px;
	border: 1px solid var(--line-strong);
	font-size: 13.5px;
	color: var(--txt2);
	transition: all .15s;
	user-select: none;
}

.chip:hover {
	border-color: rgba(61, 139, 255, .5);
	color: var(--txt)
}

.chip.sel {
	background: rgba(61, 139, 255, .15);
	border-color: rgba(61, 139, 255, .65);
	color: #cfe0ff;
	font-weight: 600
}

.submit {
	width: 100%;
	padding: 14px;
	border-radius: 12px;
	background: var(--grad);
	color: #06201b;
	font-weight: 800;
	font-size: 15.5px;
	letter-spacing: 1px;
	transition: filter .2s, transform .15s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

.submit svg {
	width: 18px;
	height: 18px
}

.submit:hover {
	filter: brightness(1.1)
}

.submit:active {
	transform: scale(.99)
}

/* 生成结果预览 */
.gen-box {
	text-align: center
}

.gen-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--txt3);
	margin-bottom: 14px
}

.gen-head svg {
	width: 16px;
	height: 16px
}

.gen-empty {
	border: 1px dashed rgba(151, 167, 209, .3);
	border-radius: var(--radius-sm);
	padding: 34px 16px;
	color: var(--txt3);
	font-size: 13px;
	line-height: 1.8
}

.gen-empty .big {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(151, 167, 209, .07);
	display: grid;
	place-items: center;
	margin: 0 auto 12px
}

.gen-empty .big svg {
	width: 26px;
	height: 26px
}

.gen-result {
	animation: fade .3s
}

.pwd-display {
	font-family: var(--mono);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 3px;
	color: #fff;
	background: linear-gradient(160deg, rgba(61, 139, 255, .16), rgba(47, 224, 203, .10));
	border: 1px solid rgba(61, 139, 255, .3);
	border-radius: var(--radius-sm);
	padding: 18px 14px;
	word-break: break-all;
	margin-bottom: 14px;
	user-select: all;
}

.gen-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 16px;
	text-align: left
}

.gen-meta .gm {
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 10px 13px
}

.gen-meta .gm .k {
	font-size: 11.5px;
	color: var(--txt3)
}

.gen-meta .gm .v {
	font-size: 13.5px;
	font-weight: 600;
	margin-top: 2px
}

.gen-meta .gm .v.unit {
	color: var(--success)
}

.gen-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px
}

.gen-actions .top-btn {
	justify-content: center
}

/* ============================================================
   授权管理 List
   ============================================================ */
.toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	flex-wrap: wrap
}

.seg {
	display: flex;
	background: rgba(151, 167, 209, .06);
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 4px;
	gap: 4px
}

.seg button {
	padding: 7px 16px;
	border-radius: 8px;
	font-size: 13px;
	color: var(--txt2);
	font-weight: 500;
	transition: all .15s
}

.seg button:hover {
	color: var(--txt)
}

.seg button.sel {
	background: rgba(61, 139, 255, .18);
	color: #cfe0ff;
	font-weight: 600
}

.toolbar .search {
	margin-left: auto;
	width: 240px
}

.auth-card {
	background: linear-gradient(165deg, var(--panel), rgba(19, 28, 50, .26));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px;
	margin-bottom: 14px;
	position: relative;
	transition: border-color .2s;
}

.auth-card:hover {
	border-color: var(--line-strong)
}

.auth-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	bottom: 18px;
	width: 3px;
	border-radius: 3px
}

.auth-card.st-active::before {
	background: var(--success)
}

.auth-card.st-expired::before {
	background: var(--txt3)
}

.auth-card.st-revoked::before {
	background: var(--danger)
}

.ac-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px
}

.ac-type {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 15px
}

.ac-type .type-ico {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: rgba(151, 167, 209, .1);
	color: var(--txt2)
}

.ac-type .type-ico svg {
	width: 18px;
	height: 18px
}

.ac-status {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px
}

.ac-body {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 16px
}

.ac-cell .k {
	font-size: 11.5px;
	color: var(--txt3);
	display: flex;
	align-items: center;
	gap: 5px
}

.ac-cell .k svg {
	width: 13px;
	height: 13px
}

.ac-cell .v {
	font-size: 14px;
	font-weight: 600;
	margin-top: 3px;
	font-family: var(--sans)
}

.ac-cell .v.mono {
	font-family: var(--mono);
	letter-spacing: 1px
}

.ac-cell .v small {
	color: var(--txt3);
	font-weight: 500;
	font-size: 12px
}

.cd-count {
	font-family: var(--mono);
	font-weight: 600
}

.cd-count.warn {
	color: var(--warn)
}

.cd-count.danger {
	color: var(--danger)
}

.cd-count.ok {
	color: var(--success)
}

.ac-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.mini-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 9px;
	border: 1px solid var(--line-strong);
	font-size: 12.5px;
	color: var(--txt2);
	font-weight: 500;
	transition: all .15s;
}

.mini-btn svg {
	width: 14px;
	height: 14px
}

.mini-btn:hover {
	background: rgba(151, 167, 209, .1);
	color: var(--txt)
}

.mini-btn.solid {
	border-color: transparent;
	color: #fff
}

.mini-btn.danger {
	background: rgba(243, 107, 107, .14);
	color: #f79a9a;
	border-color: transparent
}

.mini-btn.danger:hover {
	background: rgba(243, 107, 107, .24)
}

.mini-btn.primary {
	background: var(--grad);
	color: #06201b;
	font-weight: 700
}

.mini-btn.ghost-danger {
	color: #f79a9a
}

.mini-btn.ghost-danger:hover {
	background: rgba(243, 107, 107, .1)
}

.empty {
	text-align: center;
	padding: 60px 20px;
	border: 1px dashed rgba(151, 167, 209, .3);
	border-radius: var(--radius);
	color: var(--txt3);
}

.empty .e-ico {
	width: 60px;
	height: 60px;
	border-radius: 18px;
	background: rgba(151, 167, 209, .07);
	display: grid;
	place-items: center;
	margin: 0 auto 14px
}

.empty .e-ico svg {
	width: 28px;
	height: 28px
}

.empty .e-t {
	font-size: 15px;
	font-weight: 600;
	color: var(--txt2)
}

.empty .e-s {
	font-size: 13px;
	margin-top: 4px
}

.empty button {
	margin-top: 14px
}

/* ============================================================
   数据统计 Stats
   ============================================================ */
.stats-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 16px;
	margin-bottom: 16px
}

.chart-box {
	height: 330px;
	width: 100%
}

.chart-box.sm {
	height: 330px
}

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

.kpi {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 16px;
	background: linear-gradient(165deg, var(--panel), rgba(19, 28, 50, .26))
}

.kpi .kn {
	font-family: var(--disp);
	font-size: 26px;
	font-weight: 700
}

.kpi .kl {
	font-size: 12.5px;
	color: var(--txt3);
	margin-top: 3px
}

.kpi .kd {
	font-size: 11.5px;
	margin-top: 6px
}

.risk-list {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.risk-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: rgba(151, 167, 209, .03)
}

.risk-item .r-ico {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 9px;
	display: grid;
	place-items: center
}

.risk-item .r-t {
	flex: 1;
	font-size: 13.5px;
	font-weight: 600
}

.risk-item .r-d {
	font-size: 12px;
	color: var(--txt3)
}

.risk-item .r-lv {
	font-size: 11px;
	padding: 2px 9px;
	border-radius: 20px;
	font-weight: 600;
	white-space: nowrap
}

/* ============================================================
   弹窗 Modal + Toast
   ============================================================ */
.modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: grid;
	place-items: center;
	padding: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s;
}

.modal.show {
	opacity: 1;
	pointer-events: auto
}

.modal-card {
	width: 100%;
	max-width: 430px;
	background: linear-gradient(170deg, #131d36, #0d1526);
	border: 1px solid var(--line-strong);
	border-radius: 18px;
	padding: 26px;
	box-shadow: var(--shadow);
	transform: translateY(12px);
	transition: transform .22s;
}

.modal.show .modal-card {
	transform: none
}

.modal-ico {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	margin-bottom: 16px
}

.modal-ico svg {
	width: 24px;
	height: 24px
}

.modal h3 {
	font-size: 18px;
	font-weight: 800
}

.modal .m-sub {
	font-size: 13px;
	color: var(--txt3);
	margin-top: 5px;
	line-height: 1.6
}

.modal .m-actions {
	display: flex;
	gap: 10px;
	margin-top: 22px
}

.modal .m-actions button {
	flex: 1;
	padding: 12px;
	border-radius: 11px;
	font-weight: 700;
	font-size: 14px
}

.btn-ghost {
	border: 1px solid var(--line-strong);
	color: var(--txt2)
}

.btn-ghost:hover {
	background: rgba(151, 167, 209, .1);
	color: var(--txt)
}

.btn-primary {
	background: var(--grad);
	color: #06201b
}

.btn-danger {
	background: linear-gradient(90deg, #f36b6b, #f78a6b);
	color: #2a0808
}

.modal .field {
	margin-top: 14px
}

#toastBox {
	position: fixed;
	top: 82px;
	right: 24px;
	z-index: 80;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none
}

.toast {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #16203a;
	border: 1px solid var(--line-strong);
	border-radius: 12px;
	padding: 13px 16px;
	font-size: 13.5px;
	box-shadow: var(--shadow);
	transform: translateX(120%);
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	min-width: 240px;
	max-width: 340px;
}

.toast.show {
	transform: none
}

.toast .t-ico {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff
}

.toast .t-ico svg {
	width: 13px;
	height: 13px
}

.toast.success .t-ico {
	background: var(--success)
}

.toast.error .t-ico {
	background: var(--danger)
}

.toast.info .t-ico {
	background: var(--accent)
}

.toast.warn .t-ico {
	background: var(--gold)
}

/* ============================================================
   响应式 Responsive
   ============================================================ */
@media (max-width:1080px) {
	.stat-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.dash-grid,
	.stats-grid {
		grid-template-columns: 1fr
	}

	.create-grid {
		grid-template-columns: 1fr
	}

	.ac-body {
		grid-template-columns: repeat(2, 1fr)
	}

	.kpis {
		grid-template-columns: repeat(3, 1fr)
	}
}

@media (max-width:900px) {
	.sidebar {
		transform: translateX(-100%);
		box-shadow: none
	}

	.sidebar.open {
		transform: none;
		box-shadow: var(--shadow)
	}

	.main {
		margin-left: 0
	}

	.hamburger {
		display: flex
	}

	.content {
		padding: 18px
	}

	.topbar {
		padding: 0 16px
	}

	.search {
		display: none
	}
}

@media (max-width:560px) {
	.stat-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px
	}

	.ac-body {
		grid-template-columns: 1fr
	}

	.kpis {
		grid-template-columns: 1fr
	}

	.field-row {
		grid-template-columns: 1fr
	}

	.gen-actions {
		grid-template-columns: 1fr
	}

	.toolbar .search {
		display: none
	}

	.content {
		padding: 14px
	}

	body {
		font-size: 15px
	}

	input,
	select,
	textarea {
		font-size: 16px
	}

	.top-title .sub {
		display: none
	}
}

@media (prefers-reduced-motion:reduce) {
	* {
		animation: none !important;
		transition: none !important
	}
}

/* ============================================================
   登录模块 Login
   ============================================================ */
.login-screen {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 24px;
	background:
		radial-gradient(1100px 560px at 15% -10%, rgba(61, 139, 255, .16), transparent 60%),
		radial-gradient(900px 520px at 110% 110%, rgba(47, 224, 203, .10), transparent 55%),
		var(--bg0);
	overflow: auto;
}

.login-screen.hidden {
	display: none
}

.login-shell {
	width: 100%;
	max-width: 980px;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 0;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--line-strong);
	background: linear-gradient(170deg, var(--panel-strong), #0c1427);
	box-shadow: 0 30px 90px -40px rgba(0, 0, 0, .8);
}

/* 左侧品牌 */
.login-brand {
	position: relative;
	padding: 46px 44px;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(61, 139, 255, .16), rgba(47, 224, 203, .05));
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
}

.login-brand::after {
	content: "";
	position: absolute;
	right: -80px;
	top: -80px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(61, 139, 255, .22), transparent 70%)
}

.lb-mark {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--grad);
	display: grid;
	place-items: center;
	margin-bottom: 22px;
	box-shadow: 0 10px 28px -8px rgba(61, 139, 255, .7)
}

.lb-mark svg {
	width: 28px;
	height: 28px
}

.lb-name {
	font-family: var(--disp);
	font-weight: 900;
	font-size: 28px;
	letter-spacing: .5px
}

.lb-sub {
	font-size: 11.5px;
	color: var(--txt3);
	letter-spacing: 2.5px;
	margin-top: 4px
}

.lb-slogan {
	font-size: 16px;
	color: var(--txt2);
	line-height: 1.8;
	margin-top: 30px;
	font-weight: 500
}

.lb-feats {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding-top: 34px
}

.lbf {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--txt2)
}

.lbf-ico {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 9px;
	background: rgba(61, 139, 255, .14);
	color: #8db6ff;
	display: grid;
	place-items: center
}

.lbf-ico svg {
	width: 16px;
	height: 16px
}

/* 右侧登录卡 */
.login-card {
	padding: 40px 42px;
	display: flex;
	flex-direction: column
}

.lc-head h2 {
	font-family: var(--disp);
	font-size: 24px;
	font-weight: 800
}

.lc-head p {
	color: var(--txt3);
	font-size: 13.5px;
	margin-top: 5px
}

.login-tabs {
	display: flex;
	gap: 6px;
	background: rgba(151, 167, 209, .06);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 5px;
	margin: 24px 0 22px
}

.login-tabs button {
	flex: 1;
	padding: 10px 0;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	color: #B8C5DE;
	border: 1px solid transparent;
	transition: all .15s
}

.login-tabs button:hover {
	color: #EBF0FB;
	background: rgba(151, 167, 209, .08)
}

.login-tabs button.sel {
	background: rgba(61, 139, 255, .30);
	color: #ffffff;
	border-color: rgba(61, 139, 255, .55);
	box-shadow: 0 2px 10px rgba(61, 139, 255, .25)
}

.ltab {
	display: block
}

.phone-row {
	display: flex;
	align-items: stretch
}

.phone-row .prefix {
	display: flex;
	align-items: center;
	padding: 0 15px;
	background: rgba(151, 167, 209, .06);
	border: 1px solid var(--line);
	border-right: none;
	border-radius: 11px 0 0 11px;
	color: var(--txt2);
	font-weight: 600;
	font-size: 14px
}

.phone-row .control {
	border-radius: 0 11px 11px 0
}

.code-row {
	display: flex;
	gap: 10px
}

.code-row .control {
	flex: 1
}

.code-btn {
	flex: 0 0 auto;
	padding: 0 16px;
	border-radius: 11px;
	background: rgba(61, 139, 255, .14);
	color: #8db6ff;
	border: 1px solid rgba(61, 139, 255, .35);
	font-weight: 600;
	font-size: 13.5px;
	transition: all .15s;
	min-width: 112px;
}

.code-btn:hover {
	background: rgba(61, 139, 255, .24)
}

.code-btn:disabled {
	opacity: .5;
	cursor: not-allowed
}

.agree {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 12.5px;
	color: var(--txt2);
	margin: 6px 0 18px;
	cursor: pointer;
	line-height: 1.5
}

.agree input {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	margin-top: 2px;
	accent-color: var(--accent);
	cursor: pointer
}

.agree a {
	color: #8db6ff
}

.agree a:hover {
	text-decoration: underline
}

.login-submit {
	width: 100%;
	margin-top: 2px
}

.lc-foot {
	text-align: center;
	font-size: 12px;
	color: var(--txt3);
	margin-top: 14px
}

.qr-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 0 4px
}

.qr-box img {
	width: 168px;
	height: 168px;
	border-radius: 14px;
	background: #fff;
	padding: 8px;
	box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .7)
}

.qr-tip {
	font-size: 13.5px;
	color: var(--txt2);
	margin-top: 16px;
	font-weight: 600
}

.qr-refresh {
	font-size: 11.5px;
	color: var(--txt3);
	margin-top: 6px
}

.qr-loading {
	width: 168px;
	height: 168px;
	border-radius: 14px;
	background: rgba(151, 167, 209, .08);
	display: grid;
	place-items: center;
	color: var(--txt3);
	font-size: 12.5px
}

/* 退出登录 */
.foot-logout {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	color: var(--txt3);
	transition: all .15s
}

.foot-logout svg {
	width: 17px;
	height: 17px
}

.foot-logout:hover {
	background: rgba(243, 107, 107, .14);
	color: #f79a9a
}

@media (max-width:820px) {
	.login-shell {
		grid-template-columns: 1fr;
		max-width: 430px
	}

	.login-brand {
		display: none
	}

	.login-card {
		padding: 30px 26px
	}
}

/* ============================================================
   批量删除 + 回到顶部
   ============================================================ */
.select-all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	color: var(--txt2);
	cursor: pointer;
	user-select: none
}

.select-all input {
	width: 15px;
	height: 15px;
	accent-color: var(--accent);
	cursor: pointer
}

.batch-del {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid rgba(243, 107, 107, .4);
	background: rgba(243, 107, 107, .12);
	color: #f79a9a;
	font-size: 13px;
	font-weight: 600;
	transition: all .15s
}

.batch-del svg {
	width: 15px;
	height: 15px
}

.batch-del:hover:not(:disabled) {
	background: rgba(243, 107, 107, .22)
}

.batch-del:disabled {
	opacity: .4;
	cursor: not-allowed
}

/* 卡片勾选框 */
.auth-card .card-check {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
	cursor: pointer;
	flex: 0 0 16px;
	margin-right: 4px
}

.auth-card.selected {
	border-color: rgba(61, 139, 255, .55);
	background: linear-gradient(165deg, rgba(61, 139, 255, .10), rgba(19, 28, 50, .26))
}

/* 回到顶部 */
.back-top {
	position: fixed;
	right: 28px;
	bottom: 28px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--panel-strong);
	border: 1px solid var(--line-strong);
	color: var(--txt2);
	display: grid;
	place-items: center;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity .25s, transform .25s, color .15s;
	z-index: 70;
	box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .7)
}

.back-top.show {
	opacity: 1;
	pointer-events: auto;
	transform: none
}

.back-top:hover {
	color: #fff;
	border-color: rgba(61, 139, 255, .5)
}

.back-top svg {
	width: 20px;
	height: 20px
}