:root {
	--pd-bg: #eef2f6;
	--pd-surface: #ffffff;
	--pd-soft: #f8fafc;
	--pd-border: #d9e1ea;
	--pd-border-strong: #b7c3d0;
	--pd-text: #111827;
	--pd-muted: #637083;
	--pd-green: #0f766e;
	--pd-green-dark: #0b5f59;
	--pd-blue: #2563eb;
	--pd-orange: #c2410c;
	--pd-red: #b42318;
	--pd-purple: #6d28d9;
	--pd-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 24px rgba(15, 23, 42, .07);
}

html,
body.pawdeli-app-shell {
	background: var(--pd-bg);
	margin: 0;
	min-height: 100%;
	width: 100%;
}

body.pawdeli-app-shell * {
	box-sizing: border-box;
}

body.pawdeli-app-shell {
	color: var(--pd-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0;
}

.pawdeli-app {
	min-height: 100vh;
	padding: 16px;
	width: 100%;
}

.pawdeli-topbar {
	align-items: center;
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: 8px;
	box-shadow: var(--pd-shadow);
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(230px, .8fr) minmax(380px, 1.5fr) auto;
	padding: 14px;
	width: 100%;
}

.pawdeli-brand,
.pawdeli-login-brand {
	align-items: center;
	display: flex;
	gap: 12px;
	min-width: 0;
}

.pawdeli-brand__mark {
	align-items: center;
	background: #111827;
	border-radius: 8px;
	color: #fff;
	display: inline-flex;
	flex: 0 0 42px;
	font-size: 14px;
	font-weight: 850;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.pawdeli-brand h1,
.pawdeli-login-brand h1,
.pawdeli-panel h2,
.pawdeli-settings-head h2 {
	font-size: 18px;
	line-height: 1.25;
	margin: 0;
}

.pawdeli-panel h3 {
	font-size: 15px;
	line-height: 1.25;
	margin: 0;
}

.pawdeli-brand p,
.pawdeli-login-brand p,
.pawdeli-panel p,
.pawdeli-settings-head p {
	color: var(--pd-muted);
	font-size: 13px;
	line-height: 1.4;
	margin: 3px 0 0;
}

.pawdeli-nav {
	align-items: center;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	display: grid;
	gap: 4px;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	min-height: 42px;
	padding: 4px;
}

.pawdeli-nav button {
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: #475569;
	cursor: pointer;
	font-size: 13px;
	font-weight: 800;
	height: 34px;
	line-height: 1;
	padding: 0 10px;
	white-space: nowrap;
}

.pawdeli-nav button.is-active {
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
	color: #111827;
}

.pawdeli-header__actions {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.pawdeli-user-pill {
	background: var(--pd-soft);
	border: 1px solid var(--pd-border);
	border-radius: 8px;
	display: grid;
	gap: 2px;
	min-height: 42px;
	min-width: 148px;
	padding: 6px 10px;
}

.pawdeli-user-pill span,
.pawdeli-stat span,
.pawdeli-toolbar label > span,
.pawdeli-form-grid label > span,
.pawdeli-status-row span {
	color: var(--pd-muted);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
}

.pawdeli-user-pill strong,
.pawdeli-stat strong {
	font-size: 15px;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pawdeli-button,
.pawdeli-login-page .pawdeli-button {
	align-items: center;
	background: #fff;
	border: 1px solid var(--pd-border-strong);
	border-radius: 8px;
	color: var(--pd-text);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 800;
	justify-content: center;
	line-height: 1.15;
	min-height: 40px;
	padding: 9px 12px;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
	white-space: nowrap;
}

.pawdeli-button:hover {
	background: var(--pd-soft);
	border-color: #8fa0b3;
}

.pawdeli-button.primary {
	background: var(--pd-green);
	border-color: var(--pd-green);
	color: #fff;
}

.pawdeli-button.primary:hover {
	background: var(--pd-green-dark);
	border-color: var(--pd-green-dark);
}

.pawdeli-button.danger {
	background: #fff7ed;
	border-color: #fdba74;
	color: var(--pd-red);
}

.pawdeli-button.ghost {
	background: var(--pd-soft);
}

.pawdeli-button.full {
	width: 100%;
}

.pawdeli-button:disabled {
	cursor: not-allowed;
	opacity: .55;
}

.pawdeli-button-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

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

.pawdeli-stat {
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	display: grid;
	gap: 5px;
	min-height: 72px;
	padding: 12px;
}

.pawdeli-stat strong {
	font-size: 22px;
}

.pawdeli-main {
	margin-top: 12px;
	width: 100%;
}

.pawdeli-view {
	display: none;
}

.pawdeli-view.is-active {
	display: block;
}

.pawdeli-toolbar,
.pawdeli-panel,
.pawdeli-settings-head {
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: 8px;
	box-shadow: var(--pd-shadow);
}

.pawdeli-toolbar {
	align-items: end;
	display: grid;
	gap: 12px;
	grid-template-columns: 150px 220px 140px minmax(260px, 1fr) auto;
	padding: 12px;
	position: sticky;
	top: 0;
	z-index: 20;
}

.pawdeli-toolbar label,
.pawdeli-form-grid label,
.pawdeli-login-form label {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.pawdeli-toolbar select,
.pawdeli-toolbar input,
.pawdeli-form-grid select,
.pawdeli-form-grid input,
.pawdeli-evidence-search input,
.pawdeli-login-form input {
	background: #fff;
	border: 1px solid var(--pd-border-strong);
	border-radius: 8px;
	color: var(--pd-text);
	font-size: 14px;
	height: 40px;
	line-height: 1.25;
	min-width: 0;
	padding: 8px 10px;
	width: 100%;
}

.pawdeli-toolbar select:focus,
.pawdeli-toolbar input:focus,
.pawdeli-form-grid select:focus,
.pawdeli-form-grid input:focus,
.pawdeli-evidence-search input:focus,
.pawdeli-login-form input:focus {
	border-color: var(--pd-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
	outline: none;
}

.pawdeli-toolbar__buttons {
	display: flex;
	gap: 8px;
}

.pawdeli-panel {
	margin-top: 12px;
	overflow: hidden;
}

.pawdeli-panel__head {
	align-items: center;
	border-bottom: 1px solid var(--pd-border);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	min-height: 62px;
	padding: 14px 16px;
}

.pawdeli-check,
.pawdeli-toggle {
	align-items: center;
	background: var(--pd-soft);
	border: 1px solid var(--pd-border);
	border-radius: 8px;
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	gap: 8px;
	min-height: 38px;
	padding: 8px 10px;
	white-space: nowrap;
}

.pawdeli-check input,
.pawdeli-toggle input,
.order-select {
	accent-color: var(--pd-green);
	height: 18px;
	width: 18px;
}

.pawdeli-order-list {
	display: grid;
	gap: 12px;
	padding: 12px;
}

.pawdeli-order-card {
	background: #fff;
	border: 1px solid var(--pd-border);
	border-radius: 8px;
	display: grid;
	gap: 12px;
	grid-template-columns: 170px minmax(0, 1fr) 220px;
	min-height: 218px;
	padding: 12px;
}

.pawdeli-order-card.is-selected {
	border-color: var(--pd-green);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}

.pawdeli-label-preview {
	background: #edf2f7;
	border: 1px solid var(--pd-border);
	border-radius: 8px;
	height: 194px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.pawdeli-label-preview object,
.pawdeli-label-preview iframe {
	background: #fff;
	border: 0;
	height: 100%;
	width: 100%;
}

.pawdeli-label-preview__empty {
	align-items: center;
	color: var(--pd-muted);
	display: flex;
	font-size: 13px;
	height: 100%;
	justify-content: center;
	padding: 12px;
	text-align: center;
}

.pawdeli-order-main {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.pawdeli-order-title {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	min-width: 0;
}

.pawdeli-order-title h3 {
	font-size: 16px;
	line-height: 1.3;
	margin: 0 0 6px;
	word-break: break-word;
}

.pawdeli-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.pawdeli-order-meta {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pawdeli-meta-item {
	background: var(--pd-soft);
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	display: grid;
	gap: 4px;
	min-width: 0;
	padding: 9px;
}

.pawdeli-meta-item span {
	color: var(--pd-muted);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.pawdeli-meta-item strong {
	font-size: 13px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pawdeli-items {
	border-top: 1px dashed var(--pd-border);
	color: #344054;
	display: grid;
	font-size: 13px;
	gap: 5px;
	padding-top: 10px;
}

.pawdeli-order-actions {
	align-content: start;
	background: var(--pd-soft);
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	display: grid;
	gap: 10px;
	padding: 10px;
}

.pawdeli-status-grid {
	display: grid;
	gap: 8px;
}

.pawdeli-status-row {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.pawdeli-badge {
	align-items: center;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 850;
	line-height: 1;
	max-width: 100%;
	min-height: 24px;
	padding: 5px 8px;
	white-space: nowrap;
}

.pawdeli-badge.express {
	background: #fffbeb;
	border-color: #fcd34d;
	color: #92400e;
}

.pawdeli-badge.normal,
.pawdeli-badge.pending,
.pawdeli-badge.queued,
.pawdeli-badge.waiting {
	background: #f8fafc;
	color: #475467;
}

.pawdeli-badge.printed,
.pawdeli-badge.completed,
.pawdeli-badge.waiting_carrier {
	background: #ecfdf3;
	border-color: #86efac;
	color: var(--pd-green);
}

.pawdeli-badge.failed,
.pawdeli-badge.recording {
	background: #fff1f2;
	border-color: #fda4af;
	color: #be123c;
}

.pawdeli-badge.shopee {
	background: #fff7ed;
	border-color: #fdba74;
	color: var(--pd-orange);
}

.pawdeli-badge.tiktok {
	background: #f5f3ff;
	border-color: #ddd6fe;
	color: var(--pd-purple);
}

.pawdeli-workspace {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 1fr) 360px;
}

.pawdeli-form-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 14px;
}

.pawdeli-form-grid.compact {
	grid-template-columns: 260px minmax(280px, 1fr) auto;
	align-items: end;
}

.pawdeli-video {
	background: #0b1220;
	border-top: 1px solid var(--pd-border);
	position: relative;
}

.pawdeli-video video,
.pawdeli-video canvas {
	aspect-ratio: 16 / 9;
	display: block;
	width: 100%;
}

.pawdeli-video video {
	background: #0b1220;
}

.pawdeli-video canvas {
	left: 0;
	position: absolute;
	top: 0;
}

.pawdeli-active-order {
	color: var(--pd-muted);
	font-size: 14px;
	line-height: 1.55;
	min-height: 180px;
	padding: 14px;
}

.pawdeli-evidence-panel,
.pawdeli-diagnostics-panel {
	max-width: none;
}

.pawdeli-evidence-search {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 14px;
}

.pawdeli-evidence-results,
.pawdeli-diagnostics-results {
	display: grid;
	gap: 10px;
	padding: 14px;
}

.pawdeli-evidence-item,
.pawdeli-diagnostic-item {
	background: var(--pd-soft);
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	display: grid;
	gap: 7px;
	padding: 12px;
}

.pawdeli-evidence-item a {
	color: var(--pd-blue);
	font-weight: 800;
	margin-right: 12px;
	text-decoration: none;
}

.pawdeli-diagnostic-item.ok {
	border-color: #86efac;
}

.pawdeli-diagnostic-item.fail {
	border-color: #fda4af;
}

.pawdeli-diagnostic-item strong {
	font-size: 13px;
}

.pawdeli-diagnostic-item span {
	color: var(--pd-muted);
	font-size: 13px;
	line-height: 1.4;
}

.pawdeli-settings-page {
	display: grid;
	gap: 12px;
}

.pawdeli-settings-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 14px 16px;
}

.pawdeli-settings-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pawdeli-review-panel {
	margin-top: 0;
}

.pawdeli-review-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 14px;
}

.pawdeli-review-card {
	background: var(--pd-soft);
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	display: grid;
	gap: 10px;
	padding: 12px;
}

.pawdeli-review-card h4 {
	font-size: 14px;
	line-height: 1.25;
	margin: 0;
}

.pawdeli-review-card dl {
	display: grid;
	gap: 8px;
	margin: 0;
}

.pawdeli-review-card dl div {
	display: grid;
	gap: 3px;
}

.pawdeli-review-card dt {
	color: var(--pd-muted);
	font-size: 11px;
	font-weight: 850;
	text-transform: uppercase;
}

.pawdeli-review-card dd {
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
	overflow-wrap: anywhere;
}

.pawdeli-review-copy {
	background: #fff;
	border: 1px solid var(--pd-border);
	border-radius: 8px;
	color: #344054;
	font-size: 13px;
	line-height: 1.45;
	margin: 0;
	padding: 10px;
}

.pawdeli-settings-grid .pawdeli-panel {
	margin-top: 0;
}

.pawdeli-settings-grid .pawdeli-panel__head {
	min-height: 54px;
}

.pawdeli-toggle {
	justify-content: flex-start;
}

.pawdeli-env-block {
	background: #111827;
	border-radius: 0;
	color: #e5e7eb;
	font-size: 13px;
	line-height: 1.55;
	margin: 0;
	overflow: auto;
	padding: 14px;
	white-space: pre-wrap;
}

.pawdeli-empty {
	align-items: center;
	background: var(--pd-soft);
	border: 1px dashed var(--pd-border-strong);
	border-radius: 8px;
	color: var(--pd-muted);
	display: flex;
	font-size: 14px;
	justify-content: center;
	min-height: 140px;
	padding: 18px;
	text-align: center;
}

.pawdeli-empty.small {
	min-height: 72px;
}

.pawdeli-toast {
	background: #111827;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 8px;
	bottom: 18px;
	box-shadow: var(--pd-shadow);
	color: #fff;
	left: 50%;
	max-width: min(720px, calc(100vw - 36px));
	opacity: 0;
	padding: 11px 14px;
	pointer-events: none;
	position: fixed;
	transform: translate(-50%, 12px);
	transition: opacity .18s ease, transform .18s ease;
	z-index: 9999;
}

.pawdeli-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.pawdeli-login-page {
	align-items: center;
	background: #eef2f6;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
	width: 100%;
}

.pawdeli-login-panel {
	background: #fff;
	border: 1px solid var(--pd-border);
	border-radius: 8px;
	box-shadow: var(--pd-shadow);
	display: grid;
	gap: 22px;
	max-width: 420px;
	padding: 24px;
	width: 100%;
}

.pawdeli-login-form {
	display: grid;
	gap: 14px;
}

.pawdeli-login-form label > span {
	color: var(--pd-muted);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.pawdeli-login-message {
	color: var(--pd-red);
	font-size: 13px;
	min-height: 18px;
}

@media (max-width: 1280px) {
	.pawdeli-topbar {
		grid-template-columns: 1fr;
	}

	.pawdeli-header__actions {
		justify-content: flex-start;
	}

	.pawdeli-toolbar,
	.pawdeli-workspace,
	.pawdeli-form-grid.compact,
	.pawdeli-review-grid,
	.pawdeli-settings-grid {
		grid-template-columns: 1fr;
	}

	.pawdeli-toolbar {
		position: static;
	}

	.pawdeli-toolbar__buttons {
		flex-wrap: wrap;
	}
}

@media (max-width: 920px) {
	.pawdeli-app {
		padding: 10px;
	}

	.pawdeli-stats,
	.pawdeli-order-card,
	.pawdeli-order-meta,
	.pawdeli-form-grid,
	.pawdeli-evidence-search {
		grid-template-columns: 1fr;
	}

	.pawdeli-panel__head,
	.pawdeli-settings-head,
	.pawdeli-order-title {
		align-items: flex-start;
		flex-direction: column;
	}

	.pawdeli-nav {
		grid-auto-flow: row;
		grid-auto-rows: 34px;
	}

	.pawdeli-label-preview {
		height: 280px;
	}
}