:root {
	--sidebar: #202633;
	--sidebar-2: #181d27;
	--accent: #4d7cff;
	--accent-2: #24b9a8;
	--bg: #f2f4f8;
	--card: #fff;
	--text: #202636;
	--muted: #748094;
	--line: #e5e9f0;
	--danger: #d94a5a;
	--shadow: 0 16px 40px rgba(25,36,60,.08)
}

* {
	box-sizing: border-box
}

html,body {
	margin: 0;
	min-height: 100%;
	font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;
	color: var(--text);
	background: var(--bg)
}

button,input,select,textarea {
	font: inherit
}

.login-wrap {
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 16px;
	background: radial-gradient(circle at 20% 15%,#8ca1ef 0,transparent 33%),linear-gradient(135deg,#405fcd,#6a4397)
}

.login {
	width: min(430px,100%);
	background: #fff;
	border-radius: 22px;
	padding: 30px;
	box-shadow: 0 28px 80px rgba(28,40,90,.34)
}

.login h1 {
	margin: 4px 0 7px
}

.login-copy {
	color: var(--muted);
	font-size: 13px
}

.login label {
	display: block;
	margin: 13px 0 6px;
	font-size: 12px;
	font-weight: 800
}

.login input {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 11px
}

.button.full {
	width: 100%;
	margin-top: 18px
}

.text-link {
	display: block;
	text-align: center;
	margin-top: 15px;
	color: var(--accent);
	font-size: 12px
}

.admin-shell {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 270px minmax(0,1fr)
}

.sidebar {
	position: sticky;
	top: 0;
	height: 100vh;
	background: linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
	color: #fff;
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow-y:scroll;
	z-index: 20
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 10px 25px;
	border-bottom: 1px solid rgba(255,255,255,.08)
}

.brand-mark {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg,var(--accent),var(--accent-2));
	font-weight: 800
}

.brand strong,.brand small {
	display: block
}

.brand small {
	color: #9aa5b7;
	margin-top: 3px
}

.sidebar-quick-actions {
	display: flex;
	gap: 8px;
	padding: 0 10px 14px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-quick-actions a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 8px 9px;
	border-radius: 7px;
	color: #c7d2e3;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.sidebar-quick-actions .workspace-link { background: rgba(77,124,255,.14); }
.sidebar-quick-actions .logout { color: #ff9aa6; background: rgba(255,96,112,.08); }
.sidebar-quick-actions a:hover { background: rgba(255,255,255,.12); }
.quick-icon { font-size: 15px; line-height: 1; }

.sidebar nav {
	padding-top: 20px
}

.nav-label {
	margin: 16px 12px 8px;
	color: #7f8b9e;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 13px;
	color: #aeb8c8;
	text-decoration: none;
	padding: 12px 14px;
	border-radius: 8px;
	margin: 4px 0;
	font-size: 14px;
	transition: .18s
}

.nav-item:hover {
	background: rgba(255,255,255,.06);
	color: #fff
}

.nav-item.active {
	color: #fff;
	background: linear-gradient(90deg,rgba(77,124,255,.32),rgba(77,124,255,.08));
	box-shadow: inset 3px 0 var(--accent)
}

.nav-icon {
	width: 22px;
	text-align: center;
	font-size: 18px
}

.nav-badge {
	margin-left: auto;
	background: #EF4444;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	line-height: 1.2;
}

.sidebar-footer {
	margin-top: auto;
	padding: 18px 10px 0;
	border-top: 1px solid rgba(255,255,255,.08);
	display: grid;
	gap: 10px
}

.sidebar-footer a {
	color: #b8c2d0;
	text-decoration: none;
	font-size: 13px
}

.sidebar-footer .logout {
	color: #ff93a0
}

.main-area {
	min-width: 0
}

.topbar {
	height: 84px;
	background: #fff;
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	padding: 0 34px;
	gap: 18px;
	position: sticky;
	top: 0;
	z-index: 10
}

.topbar h1 {
	font-size: 22px;
	margin: 4px 0 0
}

.breadcrumb {
	margin: 0;
	color: var(--muted);
	font-size: 12px
}

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

.account img {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	object-fit: cover
}

.account strong,.account span {
	display: block
}

.account span {
	font-size: 12px;
	color: var(--muted);
	margin-top: 2px
}

.menu-toggle {
	display: none;
	border: 0;
	background: #eef2f7;
	border-radius: 8px;
	width: 40px;
	height: 40px
}

.content {
	padding: 30px 34px 50px;
	max-width: 1500px;
	margin: auto
}

.notice {
	padding: 13px 16px;
	border-radius: 9px;
	margin-bottom: 20px;
	background: #fff0f2;
	color: #a93443;
	border: 1px solid #ffd5dc
}

.notice.ok {
	background: #eafaf5;
	color: #167a64;
	border-color: #c6f1e5
}

.page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px
}

.head-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.search-input-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.search-input {
	padding: 8px 12px;
	border: 1px solid var(--line, #CBD5E1);
	border-radius: 8px;
	font-size: 14px;
	width: 240px;
	outline: none;
	background: #FFFFFF;
	color: #1E293B;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus {
	border-color: #5568D8;
	box-shadow: 0 0 0 3px rgba(85, 104, 216, 0.15);
}

.button-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.page-head h2 {
	font-size: 25px;
	margin: 4px 0 6px
}

.page-head p {
	margin: 0;
	color: var(--muted)
}

.eyebrow {
	font-size: 11px!important;
	letter-spacing: .16em;
	font-weight: 800;
	color: var(--accent)!important;
	margin: 0
}

.button {
	border: 0;
	background: var(--accent);
	color: #fff;
	border-radius: 8px;
	padding: 10px 15px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-weight: 700;
	font-size: 13px
}

.button:hover {
	filter: brightness(.96)
}

.button.secondary {
	background: #eef2f7;
	color: #4a5669
}

.button.danger {
	background: #fff0f2;
	color: var(--danger)
}

.button.small {
	padding: 8px 10px;
	font-size: 12px
}

.button:disabled,.link-button:disabled {
	opacity: .42;
	cursor: not-allowed
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: 18px
}

.stat-card {
	position: relative;
	overflow: hidden;
	background: #fff;
	border-radius: 11px;
	padding: 23px;
	box-shadow: var(--shadow);
	border-top: 3px solid var(--accent)
}

a.stat-card {
	display: block;
	text-decoration: none;
	cursor: pointer;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(23, 33, 59, 0.14);
}

.stat-card:after {
	content: "";
	position: absolute;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: currentColor;
	opacity: .055;
	right: -24px;
	top: -22px
}

.stat-card.teal {
	border-color: #20a884
}

.stat-card.green {
	border-color: #51b36b
}

.stat-card.amber {
	border-color: #e2a526
}

.stat-card span,.stat-card small {
	display: block;
	color: var(--muted)
}

.stat-card strong {
	display: block;
	font-size: 34px;
	margin: 12px 0 8px
}

.dashboard-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 18px;
	margin-top: 18px
}

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 22px;
	box-shadow: var(--shadow);
	margin-bottom: 20px
}

.metric-panel strong {
	font-size: 42px;
	display: block;
	margin: 18px 0 7px
}

.metric-panel h3,.quick-panel h3 {
	margin: 6px 0
}

.metric-panel p {
	color: var(--muted)
}

.quick-links {
	display: grid;
	gap: 9px;
	margin-top: 16px
}

.quick-links a {
	padding: 12px 14px;
	background: #f5f7fb;
	border: 1px solid var(--line);
	border-radius: 8px;
	text-decoration: none;
	color: var(--text);
	font-weight: 650
}

.section-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20px
}

.section-heading h3 {
	margin: 0 0 5px
}

.section-heading p {
	margin: 0;
	color: var(--muted)
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 16px;
	margin-bottom: 18px
}

.form-grid.two {
	grid-template-columns: repeat(2,minmax(0,1fr))
}

label {
	display: block;
	font-size: 12px;
	font-weight: 800;
	color: #546074;
	margin-bottom: 7px
}

input,select,textarea {
	width: 100%;
	border: 1px solid #dce2eb;
	border-radius: 7px;
	background: #fff;
	color: var(--text);
	padding: 10px 11px;
	outline: none
}

/* AI 設定中的核取方塊不可套用一般輸入欄位的 width:100%。 */
#ai_config_form input[type="checkbox"] {
	width: auto;
	min-width: 0;
	padding: 0;
	margin: 0;
	flex: 0 0 auto;
}

#knowledgeBulkForm input[type="checkbox"],
#knowledgeSelectAll,
[data-knowledge-select] {
	width: auto;
	min-width: 0;
	padding: 0;
	margin: 0;
}

input:focus,select:focus,textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(77,124,255,.12)
}

small {
	color: var(--muted)
}

.table-wrap {
	overflow: auto
}

table {
	width: 100%;
	border-collapse: collapse;
	min-width: 920px
}

th {
	text-align: left;
	color: #7e899a;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 11px 12px;
	border-bottom: 1px solid var(--line)
}

td {
	padding: 14px 12px;
	border-bottom: 1px solid #eef1f5;
	vertical-align: middle;
	font-size: 13px
}

.agent-cell {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 190px
}

.agent-cell.compact {
	min-width: 150px
}

.agent-cell .avatar {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 12px;
	background: #edf1f7
}

.agent-cell strong,.agent-cell span,.agent-cell small {
	display: block
}

.agent-cell span {
	color: #657186;
	margin-top: 2px
}

.status-pill,.role-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px;
	border-radius: 999px;
	background: #eef1f6;
	color: #657186;
	font-size: 11px;
	margin: 2px
}

.status-pill i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #8f9aae
}

.status-pill.online {
	background: #e5f8f1;
	color: #187d67
}

.status-pill.online i {
	background: #25ad87
}

.role-pill {
	background: #eef3ff;
	color: #4568be
}

.avatar-form,.inline-form,.action-stack,.copy-row {
	display: flex;
	align-items: center;
	gap: 7px
}

.avatar-form {
	min-width: 250px;
	flex-wrap: wrap
}

.inline-form input {
	width: 112px
}

.file-button {
	margin: 0;
	max-width: 105px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: #eef2f7;
	border-radius: 7px;
	padding: 8px 9px;
	cursor: pointer;
	font-size: 11px
}

.file-button input {
	display: none
}

.link-button {
	border: 0;
	background: transparent;
	color: var(--accent);
	cursor: pointer;
	font-size: 11px
}

.action-stack {
	flex-wrap: wrap
}

.copy-row input {
	min-width: 360px;
	background: #f6f8fb;
	font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
	font-size: 11px
}

.text-link {
	color: #000;
	text-decoration: none
}

.info-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px
}

.info-card h3,.info-card p {
	margin: 0
}

.info-card p {
	color: var(--muted);
	margin-top: 5px
}

.info-card code {
	background: #202633;
	color: #dce5f5;
	padding: 12px 15px;
	border-radius: 8px;
	max-width: 50%;
	overflow: auto
}

.sidebar-backdrop {
	display: none
}

.action-column {
	min-width: 120px;
	vertical-align: top
}

.agent-actions-menu {
	position: relative;
	display: inline-block
}

.agent-actions-menu>summary,.agent-plan-menu>summary,.agent-plan-history-menu>summary {
	list-style: none;
	cursor: pointer
}

.agent-actions-menu>summary::-webkit-details-marker,.agent-plan-menu>summary::-webkit-details-marker,.agent-plan-history-menu>summary::-webkit-details-marker {
	display: none
}

.agent-actions-dropdown {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	width: 180px;
	padding: 7px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(25,36,60,.22)
}

.agent-actions-dropdown form {
	margin: 0
}

.dropdown-action {
	display: block;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--text);
	text-align: left;
	cursor: pointer;
	font: inherit
}

.dropdown-action:hover {
	background: #eef3ff
}

.dropdown-action:disabled {
	opacity: .45;
	cursor: not-allowed
}

.danger-text {
	color: #c53d4c
}

.agent-plan-menu {
	position: relative
}

.agent-plan-history-menu {
	position: relative
}

.agent-plan-history-dropdown {
	position: absolute;
	z-index: 32;
	top: 0;
	left: calc(100% + 8px);
	width: 390px;
	max-height: 320px;
	overflow: auto;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(25,36,60,.22);
	list-style: none
}

.agent-plan-history-dropdown li+li {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px solid var(--line)
}

.agent-plan-history-dropdown strong,.agent-plan-history-dropdown span {
	display: block
}

.agent-plan-history-dropdown span {
	margin-top: 3px;
	color: var(--muted);
	font-size: 11px
}

.agent-plan-dropdown {
	position: absolute;
	z-index: 32;
	top: 0;
	left: calc(100% + 8px);
	width: 290px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(25,36,60,.22)
}

.agent-plan-dropdown label {
	display: grid;
	gap: 5px;
	margin-bottom: 9px
}

.agent-plan-dropdown select {
	padding: 8px
}

.agent-modal[hidden] {
	display: none!important
}

.agent-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(13,22,43,.72);
	backdrop-filter: blur(5px)
}

.agent-modal-dialog {
	width: min(760px,100%);
	max-height: calc(100vh - 40px);
	overflow: auto;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 28px 80px rgba(0,0,0,.3)
}

.agent-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 22px;
	background: linear-gradient(100deg,var(--accent),#6459e8);
	color: #fff
}

.agent-modal-header .eyebrow,.agent-modal-header h3 {
	margin: 0;
	color: #fff
}

.agent-modal-close {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	color: #fff;
	font-size: 25px;
	cursor: pointer
}

.agent-modal-form {
	padding: 24px
}

.agent-modal-form .wide {
	grid-column: 1/-1
}

.agent-plan-new-field[hidden],.agent-plan-date-field[hidden] {
	display: none!important
}

.agent-plan-date-field input[type="date"] {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none
}

.agent-plan-date-field input[type="date"]::-webkit-calendar-picker-indicator {
	display: none;
	-webkit-appearance: none
}

.agent-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px
}

.plan-history-modal-dialog {
	width: min(680px,100%)
}

.plan-history-modal-body {
	padding: 24px
}

.plan-history-modal-body ul {
	margin: 0;
	padding: 0;
	list-style: none
}

.plan-history-modal-body li {
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #f8fafc
}

.plan-history-modal-body li+li {
	margin-top: 10px
}

.plan-history-modal-body strong,.plan-history-modal-body span {
	display: block
}

.plan-history-modal-body span {
	margin-top: 4px;
	color: var(--muted);
	font-size: 12px
}

body.agent-modal-open {
	overflow: hidden
}

@media(max-width:760px) {
	.agent-modal {
		padding: 0
	}

	.agent-modal-dialog {
		width: 100%;
		max-height: 100vh;
		min-height: 100vh;
		border-radius: 0
	}

	.agent-plan-dropdown {
		position: static;
		width: 100%;
		margin-top: 6px
	}

	.agent-plan-history-dropdown {
		position: static;
		width: 100%;
		margin-top: 6px
	}
}

.action-stack {
	align-items: flex-start
}

.edit-agent {
	position: relative
}

.edit-agent summary {
	list-style: none
}

.edit-agent summary::-webkit-details-marker {
	display: none
}

.edit-agent[open] summary {
	background: #dfe7f5
}

.edit-agent-form {
	position: absolute;
	z-index: 12;
	left: 0;
	top: 40px;
	width: 310px;
	padding: 15px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 20px 55px rgba(25,36,60,.22);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px
}

.edit-agent-form label {
	margin: 0
}

.edit-agent-form label:nth-of-type(-n+3),.edit-agent-form .button {
	grid-column: 1/-1
}

.edit-agent-form input,.edit-agent-form select {
	padding: 8px
}

.agent-plan-cell {
	min-width: 230px;
	vertical-align: top
}

.agent-plan-cell>strong,.agent-plan-cell>small {
	display: block
}

.agent-plan-cell>small {
	margin: 4px 0 9px;
	color: var(--muted);
	white-space: nowrap
}

.plan-editor {
	display: inline-block
}

.plan-editor .edit-agent-form {
	width: 330px
}

.plan-history {
	margin-top: 9px
}

.plan-history>summary {
	color: var(--accent);
	cursor: pointer;
	font-size: 12px
}

.plan-history ul {
	min-width: 320px;
	margin: 8px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: #f8fafc;
	list-style: none
}

.plan-history li+li {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px solid var(--line)
}

.plan-history li strong,.plan-history li span {
	display: block;
	white-space: nowrap
}

.plan-history li span {
	margin-top: 2px;
	color: var(--muted);
	font-size: 11px
}

.chat-table {
	min-width: 1120px
}

.chat-action {
	white-space: nowrap
}

.chat-table td strong,.chat-table td small,.chat-summary span {
	display: block
}

.chat-table td small,.chat-summary span {
	margin-top: 4px;
	color: var(--muted)
}

.chat-summary {
	min-width: 280px;
	max-width: 430px
}

.chat-summary span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.table-empty {
	text-align: center;
	color: var(--muted);
	padding: 32px
}

.nav-count {
	display: inline-grid;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	place-items: center;
	border-radius: 999px;
	background: var(--danger);
	color: #fff;
	font-size: 11px;
	font-weight: 850
}

.nav-count[hidden] {
	display: none!important
}

.table-count {
	min-width: 24px
}

.workspace-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px
}

.workspace-link .nav-count {
	flex: 0 0 auto
}

.message-notification {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 80;
	width: min(390px,calc(100vw - 32px));
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 17px;
	border: 1px solid #dbe4ff;
	border-left: 4px solid var(--accent);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 20px 55px rgba(25,36,60,.24)
}

.message-notification[hidden] {
	display: none!important
}

.message-notification div {
	min-width: 0;
	flex: 1
}

.message-notification strong {
	display: block;
	font-size: 14px
}

.message-notification p {
	margin: 5px 0 0;
	overflow: hidden;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.45;
	text-overflow: ellipsis;
	white-space: nowrap
}

.message-notification a {
	flex: 0 0 auto;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none
}

@media(max-width:1050px) {
	.stats-grid {
		grid-template-columns: repeat(2,1fr)
	}

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

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

@media(max-width:780px) {
	.admin-shell {
		display: block
	}

	.sidebar {
		position: fixed !important;
		top: 0 !important;
		left: -300px !important;
		width: 270px !important;
		height: 100vh !important;
		height: 100dvh !important;
		z-index: 1000 !important;
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
		transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.menu-open .sidebar,
	body.menu-open .sidebar {
		left: 0 !important;
	}

	.sidebar-backdrop {
		display: block !important;
		position: fixed !important;
		inset: 0 !important;
		background: rgba(15, 23, 42, 0.6) !important;
		backdrop-filter: blur(4px) !important;
		-webkit-backdrop-filter: blur(4px) !important;
		z-index: 999 !important;
		opacity: 0 !important;
		pointer-events: none !important;
		transition: opacity 0.3s ease !important;
	}

	.menu-open .sidebar-backdrop,
	body.menu-open .sidebar-backdrop {
		opacity: 1 !important;
		pointer-events: auto !important
	}

	.menu-toggle {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.topbar {
		height: 74px;
		padding: 0 16px
	}

	.account div {
		display: none
	}

	.content {
		padding: 22px 16px 40px
	}

	.page-head {
		display: block
	}

	.page-head .button {
		margin-top: 14px
	}

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

	.info-card {
		display: block
	}

	.info-card code {
		display: block;
		max-width: 100%;
		margin-top: 14px
	}

	.card {
		padding: 17px
	}

	.message-notification {
		right: 16px;
		bottom: 16px
	}
}


.logo-upload {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.logo-preview {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fafbfc;
	min-height: 80px
}

.logo-preview.empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	font-size: 14px
}

.logo-preview img {
	max-width: 100px;
	max-height: 80px;
	object-fit: contain
}

.logo-preview button {
	margin-left: 12px;
	flex-shrink: 0
}

.logo-upload input[type="file"] {
	padding: 8px;
	border: 1px dashed var(--line);
	border-radius: 6px;
	background: #fafbfc;
	cursor: pointer
}

.logo-upload small {
	color: var(--muted);
	font-size: 12px
}

.pagination-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-top: 1px solid var(--border, #E2E8F0);
	font-size: 14px;
	color: #64748B;
}

.pagination-links {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pagination-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border-radius: 6px;
	border: 1px solid #CBD5E1;
	background: #FFFFFF;
	color: #334155;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.15s ease;
}

.pagination-link:hover {
	border-color: #5568D8;
	color: #5568D8;
	background: #F8FAFC;
}

.pagination-link.active {
	background: #5568D8;
	border-color: #5568D8;
	color: #FFFFFF;
	font-weight: 600;
}

.pagination-link.disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: not-allowed;
}

/* ========== 統計報表與 Analytics 圖表樣式 ========== */
.range-button-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #F1F5F9;
	padding: 4px;
	border-radius: 20px;
}

.range-btn {
	border: none;
	background: transparent;
	padding: 6px 14px;
	border-radius: 16px;
	font-size: 12px;
	font-weight: 600;
	color: #64748B;
	cursor: pointer;
	transition: all 0.2s ease;
}

.range-btn:hover {
	color: #0F172A;
	background: rgba(255, 255, 255, 0.6);
}

.range-btn.active {
	background: #0084FF;
	color: #FFFFFF;
	box-shadow: 0 2px 6px rgba(0, 132, 255, 0.25);
}

.chart-bars-wrapper {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-x;
}

.chart-bars-wrapper:active {
	cursor: grabbing;
}

.chart-bars-container {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 180px;
	padding: 16px 4px 0;
	border-bottom: 2px solid #E2E8F0;
	gap: 6px;
	min-width: 100%;
	width: max-content;
	user-select: none;
	-webkit-user-select: none;
}

.chart-bar-col {
	flex: 1;
	min-width: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	position: relative;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.chart-bar-col * {
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

.chart-bar-val {
	font-size: 10px;
	font-weight: 700;
	color: #5568D8;
	height: 16px;
	line-height: 16px;
	text-align: center;
}

.chart-bar-track {
	flex: 1;
	width: 100%;
	max-width: 24px;
	display: flex;
	align-items: flex-end;
	background: rgba(226, 232, 240, 0.4);
	border-radius: 6px 6px 0 0;
	overflow: hidden;
}

.chart-bar-fill {
	width: 100%;
	background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%);
	border-radius: 6px 6px 0 0;
	transition: height 0.3s ease, background 0.2s ease;
}

.chart-bar-fill.trend-fill {
	background: linear-gradient(180deg, #10B981 0%, #059669 100%);
}

.chart-bar-col:hover .chart-bar-fill {
	background: #6366F1;
}

.chart-bar-lbl {
	font-size: 10px;
	color: #64748B;
	margin-top: 6px;
	white-space: nowrap;
}

.rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #F1F5F9;
	color: #475569;
	font-size: 11px;
	font-weight: 700;
}

.analytics-url-table th {
	background: #F8FAFC;
	color: #475569;
	font-size: 12px;
	font-weight: 700;
	text-align: left;
	padding: 10px 14px;
	border-bottom: 2px solid #E2E8F0;
}

.analytics-url-table td {
	padding: 12px 14px;
	border-bottom: 1px solid #E2E8F0;
	font-size: 13px;
}

.url-cell {
	max-width: 380px;
	word-break: break-all;
}

.url-cell a {
	color: #2563EB;
	text-decoration: none;
	font-weight: 500;
}

.url-cell a:hover {
	text-decoration: underline;
}

.muted-text {
	color: #94A3B8;
	font-style: italic;
}

.empty-cell {
	text-align: center;
	color: #94A3B8;
	padding: 24px 0;
}

.url-card-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.url-item-card {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 12px;
}

.url-item-header {
	display: flex;
	align-items: flex-start;
	margin-bottom: 10px;
}

.rank-badge-blue {
	width: 22px;
	height: 22px;
	border-radius: 11px;
	background: #2563EB;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	flex-shrink: 0;
	margin-top: 1px;
}

.url-card-title {
	flex: 1;
	font-size: 13px;
	font-weight: 700;
	color: #1E40AF;
	line-height: 18px;
	word-break: break-all;
}

.url-card-title a {
	color: #1E40AF;
	text-decoration: none;
}

.url-card-title a:hover {
	text-decoration: underline;
}

.url-metrics-grid {
	display: flex;
	align-items: stretch;
	background: #FFFFFF;
	border-radius: 8px;
	padding: 10px 4px;
	border: 1px solid #E2E8F0;
}

.url-metric-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	padding: 0 2px;
	border-right: 1px solid #F1F5F9;
}

.url-metric-item-last {
	border-right: none;
}

.metric-label-box {
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.metric-label {
	font-size: 10px;
	color: #64748B;
	font-weight: 600;
	text-align: center;
	line-height: 13px;
}

.metric-val-box {
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.metric-val {
	font-size: 13px;
	font-weight: 800;
	color: #0F172A;
	text-align: center;
}

.metric-val.text-blue {
	color: #2563EB;
}

.metric-val.text-green {
	color: #16A34A;
}

@media (max-width: 768px) {
	.desktop-table-only {
		display: none !important;
	}
	.mobile-cards-only {
		display: flex !important;
	}
}

@media (min-width: 769px) {
	.mobile-cards-only {
		display: none !important;
	}
	.desktop-table-only {
		display: block !important;
	}
}

.oauth-login-area { margin: 16px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.oauth-login-area p { margin: 0 0 9px; color: var(--muted); font-size: 12px; }
.oauth-login-area > div { display: flex; gap: 7px; flex-wrap: wrap; }
.oauth-login { flex: 1 1 118px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; text-decoration: none; font-size: 12px; font-weight: 750; border: 1px solid #cbd5e1; color: #1e293b; background: #fff; }
.oauth-login span { font-weight: 900; }
.oauth-login.google span { color: #4285f4; }
.oauth-login.facebook { color: #fff; background: #1877f2; border-color: #1877f2; }
.oauth-login.line { color: #fff; background: #06c755; border-color: #06c755; }
.oauth-login.line span { font-size: 9px; }