$primary: #1a73e8;
	$primary-light: #e8f0fe;
	$success: #0d9488;
	$success-light: #d1fae5;
	$danger: #dc2626;
	$danger-light: #fee2e2;
	$warning: #f59e0b;
	$warning-light: #fef3c7;
	$skip: #6b7280;
	$skip-light: #f3f4f6;
	$page-bg: #f5f7fa;
	$card: #ffffff;
	$text: #1f2937;
	$text-secondary: #6b7280;
	$border: #e5e7eb;

	page {
		background: $page-bg;
	}

	button {
		margin: 0;
		font-family: inherit;
		letter-spacing: 0;
	}

	button::after {
		border: 0;
	}

	button:focus-visible,
	input:focus {
		outline: 3px solid rgba(26, 115, 232, 0.32);
		outline-offset: 2px;
	}

	.page-shell {
		min-height: 100vh;
		color: $text;
		font-family: Roboto, "Noto Sans SC", "Microsoft YaHei", sans-serif;
		background: $page-bg;
	}

	.login-page {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		padding: calc(var(--status-bar-height, 0px) + 54px) 24px 52px;
		background: linear-gradient(160deg, #287dea 0%, #1a73e8 48%, #1459ae 100%);
	}

	.login-brand {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #ffffff;
	}

	.login-logo-icon {
		position: relative;
		box-sizing: border-box;
		width: 72px;
		height: 72px;
		margin-bottom: 18px;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.16);
		box-shadow: 0 8px 24px rgba(5, 51, 118, 0.18);
	}

	.login-logo-icon::before {
		position: absolute;
		inset: 19px;
		content: '';
		border: 3px solid #ffffff;
		border-radius: 4px;
	}

	.logo-grid-line {
		position: absolute;
		z-index: 1;
		background: #ffffff;
	}

	.logo-grid-line-horizontal {
		left: 20px;
		top: 31px;
		width: 32px;
		height: 3px;
	}

	.logo-grid-line-vertical {
		left: 31px;
		top: 20px;
		width: 3px;
		height: 32px;
	}

	.login-logo-title {
		font-size: 22px;
		font-weight: 700;
		line-height: 30px;
	}

	.login-logo-sub {
		margin-top: 2px;
		font-size: 14px;
		line-height: 22px;
		opacity: 0.82;
	}

	.login-card {
		box-sizing: border-box;
		width: 100%;
		max-width: 430px;
		margin-top: 35px;
		padding: 24px 20px;
		border-radius: 16px;
		background: $card;
		box-shadow: 0 18px 44px rgba(8, 49, 108, 0.26);
	}

	.login-field {
		margin-bottom: 18px;
	}

	.login-field-label {
		display: block;
		margin-bottom: 8px;
		color: $text-secondary;
		font-size: 14px;
		font-weight: 500;
	}

	.login-field-input,
	.login-field-select {
		box-sizing: border-box;
		width: 100%;
		height: 48px;
		padding: 0 14px;
		border: 1px solid #dfe3e8;
		border-radius: 10px;
		color: $text;
		font-size: 16px;
		background: #ffffff;
		box-shadow: inset 0 0 0 1px rgba(31, 41, 55, 0.02);
	}

	.login-field-select {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.select-chevron {
		color: $text-secondary;
		font-size: 20px;
	}

	.login-error {
		display: block;
		margin: -6px 0 12px;
		color: $danger;
		font-size: 13px;
	}

	.login-btn {
		width: 100%;
		height: 50px;
		border-radius: 10px;
		color: #ffffff;
		font-size: 16px;
		font-weight: 700;
		line-height: 50px;
		background: linear-gradient(90deg, #1a73e8, #438cf0);
	}

	.login-accounts {
		margin-top: 18px;
		padding-top: 17px;
		border-top: 1px solid $border;
	}

	.login-accounts-title {
		display: block;
		margin-bottom: 10px;
		color: $text-secondary;
		font-size: 13px;
		text-align: center;
	}

	.login-quick-btns {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.login-quick-btn {
		box-sizing: border-box;
		width: 100%;
		height: 48px;
		padding: 0 14px;
		border: 1px solid $border;
		border-radius: 8px;
		color: $text;
		font-size: 14px;
		line-height: 46px;
		text-align: left;
		background: #ffffff;
	}

	.login-quick-btn-name {
		font-weight: 500;
	}

	.login-quick-btn-role {
		color: $text-secondary;
		font-size: 13px;
	}

	.work-page {
		box-sizing: border-box;
		width: 100%;
		max-width: 480px;
		min-height: 100vh;
		margin: 0 auto;
		padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px));
		background: $page-bg;
	}

	.app-header {
		box-sizing: border-box;
		padding: calc(var(--status-bar-height, 0px) + 12px) 14px 12px;
		color: #ffffff;
		background: $primary;
		box-shadow: 0 2px 8px rgba(26, 115, 232, 0.22);
	}

	.header-top,
	.header-actions,
	.scan-row,
	.progress-header,
	.pick-item-row1,
	.pick-item-row2,
	.submit-info,
	.box-list-item,
	.partial-input-row {
		display: flex;
		align-items: center;
	}

	.header-top {
		justify-content: space-between;
	}

	.header-back {
		width: 48px;
		height: 48px;
		margin-right: 4px;
		color: #ffffff;
		font-size: 30px;
		line-height: 44px;
		background: transparent;
	}

	.header-title {
		flex: 1;
		font-size: 20px;
		font-weight: 700;
		line-height: 28px;
	}

	.header-actions {
		gap: 8px;
	}

	.header-badge {
		border-radius: 6px;
		color: #ffffff;
		font-size: 12px;
		background: rgba(255, 255, 255, 0.16);
	}

	.header-badge {
		padding: 5px 9px;
	}

	.work-content {
		box-sizing: border-box;
		padding: 1px 0 104px;
	}

	.box-select-wrap {
		position: relative;
		z-index: 5;
		margin: 12px;
	}

	.box-select-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		height: 48px;
		padding: 0 14px;
		border: 2px solid $primary;
		border-radius: 12px;
		color: $primary;
		font-size: 14px;
		font-weight: 500;
		line-height: 44px;
		text-align: left;
		background: $card;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.box-chevron {
		font-size: 12px;
		transition: transform 160ms ease-out;
	}

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

	.box-dropdown {
		position: absolute;
		top: 53px;
		left: 0;
		right: 0;
		overflow: hidden;
		border: 1px solid $border;
		border-radius: 10px;
		background: $card;
		box-shadow: 0 10px 28px rgba(31, 41, 55, 0.18);
	}

	.box-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		min-height: 56px;
		padding: 9px 14px;
		border-bottom: 1px solid #f0f1f3;
		font-size: 13px;
	}

	.box-option:last-child {
		border-bottom: 0;
	}

	.box-option.active {
		color: $primary;
		font-weight: 600;
		background: $primary-light;
	}

	.box-option.completed { color: #596675; background: #f3f7f6; }
	.box-option-number, .box-option-order { display: block; }
	.box-option-number { font-size: 13px; font-weight: 700; }
	.box-option-order { margin-top: 3px; color: $text-secondary; font-size: 11px; }
	.box-option-state { padding: 5px 7px; border-radius: 5px; color: #08786c; font-size: 11px; background: $success-light; }
	.box-option-state.draft { color: #865b0b; background: $warning-light; }

	.scan-section {
		margin: 0 12px 10px;
		padding: 12px;
		border-radius: 12px;
		background: $card;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.scan-row {
		gap: 10px;
	}

	.scan-hardware-tip { display: block; margin-top: 9px; color: #41668f; font-size: 11px; font-weight: 600; line-height: 17px; }

	.last-scan {
		display: flex;
		align-items: center;
		margin-top: 10px;
		padding: 12px;
		border-radius: 10px;
		color: #0b5f57;
		background: #dff7f0;
	}

	.last-scan.warning { color: #77500a; background: #fff2cf; }
	.last-scan.error { color: #a51d1d; background: #fee5e5; }
	.last-scan-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 10px; border-radius: 50%; color: #ffffff; font-size: 20px; font-weight: 700; background: $success; }
	.last-scan.warning .last-scan-icon { background: $warning; }
	.last-scan.error .last-scan-icon { background: $danger; }
	.last-scan-content { display: flex; min-width: 0; flex: 1; flex-direction: column; }
	.last-scan-label { font-size: 12px; font-weight: 700; }
	.last-scan-sku { margin-top: 3px; font-size: 17px; font-weight: 800; }
	.last-scan-detail { margin-top: 3px; font-size: 12px; line-height: 18px; }
	.scan-history { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
	.scan-history-item { overflow: hidden; color: $text-secondary; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

	.progress-section {
		margin: 0 12px 10px;
		padding: 13px 14px;
		border-radius: 12px;
		background: $card;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.progress-header {
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
	}

	.progress-title {
		font-size: 14px;
		font-weight: 700;
	}

	.progress-stats {
		color: $text-secondary;
		font-size: 12px;
		text-align: right;
	}

	.progress-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
	.box-tasks-btn { height: 48px; padding: 0 12px; border: 1px solid #cdd9e7; border-radius: 8px; color: #3f5f81; font-size: 12px; line-height: 46px; background: #f7faff; }

	.progress-number {
		color: $success;
		font-weight: 700;
	}

	.progress-bar-bg {
		overflow: hidden;
		height: 7px;
		margin-top: 10px;
		border-radius: 999px;
		background: #e5e7eb;
	}

	.progress-bar-fill {
		height: 100%;
		border-radius: inherit;
		background: $success;
		transform-origin: left center;
		transition: transform 180ms ease-out;
	}

	.pick-list {
		margin: 0 12px;
	}

	.pick-item {
		position: relative;
		box-sizing: border-box;
		margin-bottom: 10px;
		padding: 15px 13px 13px;
		border-radius: 12px;
		background: $card;
		box-shadow: 0 2px 7px rgba(17, 24, 39, 0.08);
	}

	.pick-item.pending {
		background: #f7fbff;
	}

	.pick-item.picked { background: #f1fbf8; }
	.pick-item.partial { background: #f2f7ff; }
	.pick-item.skipped { background: #f6f7f8; }

	.pick-status-tag {
		box-sizing: border-box;
		padding: 3px 8px;
		border-radius: 6px;
		font-size: 12px;
		font-weight: 600;
		line-height: 16px;
		white-space: nowrap;
	}

	.tag-picked { color: #067568; background: $success-light; }
	.tag-partial { color: #2563c9; background: #dbeafe; }
	.tag-skipped { color: $skip; background: #e5e7eb; }

	.pick-item-row1 {
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
	}

	.pick-item-sku {
		flex-shrink: 0;
		font-size: 15px;
		font-weight: 700;
	}

	.pick-item-meta {
		display: flex;
		max-width: 70%;
		min-width: 0;
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
	}

	.pick-item-qty {
		max-width: 100%;
		font-size: 13px;
		line-height: 18px;
		text-align: right;
		color: $text-secondary;
	}

	.qty-number {
		color: $text;
		font-size: 19px;
		font-weight: 700;
	}

	.actual-number {
		color: #4a7dff;
		font-size: 14px;
		font-weight: 700;
	}

	.pick-item-row2 {
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
		margin-top: 8px;
	}

	.pick-item-desc {
		flex: 1;
		min-width: 0;
		color: $text-secondary;
		font-size: 13px;
		line-height: 18px;
	}

	.pick-item-location {
		flex-shrink: 0;
		padding: 6px 9px;
		border-radius: 5px;
		color: #2874c9;
		font-size: 16px;
		font-weight: 800;
		background: #e9f4ff;
	}

	.pick-item-actions {
		display: grid;
		grid-template-columns: 1.15fr 1fr 0.78fr;
		gap: 8px;
		margin-top: 12px;
	}

	.processed-actions {
		grid-template-columns: 1fr;
	}

	.pick-btn {
		height: 48px;
		padding: 0 6px;
		border-radius: 7px;
		font-size: 13px;
		font-weight: 600;
		line-height: 48px;
	}

	.pick-btn-confirm { color: #ffffff; background: $success; }
	.pick-btn-partial { border: 1px solid #75a5ef; color: #4a7dff; background: #eef5ff; }
	.pick-btn-skip { color: $skip; background: #eef0f3; }
	.pick-btn-undo { border: 1px solid #d8dde4; color: $text-secondary; background: #ffffff; }

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px 20px;
		color: $text-secondary;
	}

	.empty-state-icon {
		font-size: 34px;
	}

	.empty-state-text {
		margin-top: 10px;
		font-size: 14px;
	}

	.submit-section {
		position: fixed;
		z-index: 8;
		left: 50%;
		bottom: 8px;
		display: flex;
		align-items: center;
		gap: 12px;
		box-sizing: border-box;
		width: calc(100% - 20px);
		max-width: 460px;
		padding: 10px 12px;
		border: 1px solid #dbe2ea;
		border-radius: 14px;
		background: #ffffff;
		box-shadow: 0 6px 20px rgba(31, 41, 55, 0.16);
		transform: translateX(-50%);
	}

	.submit-info {
		display: flex;
		width: 108px;
		min-width: 108px;
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
	}

	.submit-pending { white-space: nowrap; }
	.submit-pending-number { color: $warning; font-size: 20px; font-weight: 800; }
	.submit-pending-label { color: $text-secondary; font-size: 12px; }
	.submit-status-hint { display: block; margin-top: 3px; color: #66768a; font-size: 10px; line-height: 14px; }

	.submit-btn {
		box-sizing: border-box;
		width: auto;
		height: 56px;
		min-width: 0;
		flex: 1;
		padding: 0 10px;
		border-radius: 10px;
		color: #ffffff;
		font-size: 15px;
		font-weight: 700;
		line-height: 56px;
		background: $primary;
	}

	.submit-btn[disabled] {
		color: #8a9099;
		background: #e4e6eb;
		opacity: 1;
	}

	.portal-page {
		box-sizing: border-box;
		width: 100%;
		max-width: 480px;
		min-height: 100vh;
		margin: 0 auto;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #f4f7fb;
	}

	.portal-header-shell { position: sticky; top: 0; z-index: 30; }

	.portal-header {
		box-sizing: border-box;
		padding: calc(var(--status-bar-height, 0px) + 6px) 10px 6px;
		color: #ffffff;
		background: #135ee8;
	}

	.portal-header-row {
		display: grid;
		align-items: center;
		grid-template-columns: 48px minmax(0, 1fr) 48px;
	}

	.portal-title,
	.module-hero-title,
	.module-hero-desc,
	.operation-name,
	.operation-desc,
	.summary-number,
	.summary-label,
	.profile-name,
	.profile-role,
	.history-empty-title,
	.history-empty-desc {
		display: block;
	}

	.portal-title { overflow: hidden; font-size: 18px; font-weight: 600; line-height: 48px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

	.portal-header-button {
		width: 48px;
		height: 48px;
		padding: 0;
		color: #ffffff;
		font-size: 26px;
		line-height: 48px;
		background: transparent;
	}

	.avatar-button {
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: 0;
		color: #ffffff;
		font-size: 17px;
		font-weight: 600;
		line-height: 48px;
		background: transparent;
	}
	.portal-header-spacer { width: 48px; height: 48px; }

	.portal-content { padding: 16px 14px 24px; }

	.home-menu { padding: 16px 12px 24px; }
	.home-group + .home-group { margin-top: 18px; }
	.home-group-title { display: flex; align-items: center; margin-bottom: 10px; color: #445166; font-size: 16px; line-height: 24px; }
	.home-group-mark { width: 4px; height: 20px; flex-shrink: 0; margin-right: 10px; background: #1769e8; }
	.home-group-disabled .home-group-title { color: #7b8795; }
	.home-group-disabled .home-group-mark { background: #aeb8c4; }
	.home-operation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.home-operation { position: relative; display: flex; box-sizing: border-box; min-width: 0; height: 96px; padding: 10px 5px 9px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #dce3eb; border-radius: 4px; color: #334155; background: #ffffff; }
	.home-operation:active { border-color: #9bbcf2; background: #edf4ff; }
	.home-operation-primary { border-color: #8cb5f5; color: #135ee8; background: #edf4ff; }
	.home-operation-disabled, .home-operation-disabled[disabled] { border-color: #e1e6ec; color: #8b97a5; opacity: 1; background: #f1f3f6; }
	.home-operation-disabled:active { border-color: #e1e6ec; background: #f1f3f6; }
	.home-operation-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 20px; font-weight: 700; }
	.home-operation-name { display: block; width: 100%; margin-top: 3px; overflow: hidden; font-size: 14px; line-height: 20px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
	.home-operation-pending { color: #52657c; font-size: 11px; line-height: 16px; }
	.home-operation-unavailable { color: #929dab; font-size: 11px; line-height: 16px; }

	.header-menu-sheet { box-sizing: border-box; width: 100vw; max-width: 480px; }
	.header-menu-content { padding-top: 1px; }
	.header-menu-title { display: block; margin: 17px 16px 8px; color: #1f2937; font-size: 17px; font-weight: 700; }
	.header-menu-item { display: grid; box-sizing: border-box; width: calc(100% - 32px); height: 54px; margin: 0 16px; padding: 0 4px; align-items: center; grid-template-columns: 32px minmax(0, 1fr) 24px; border-bottom: 1px solid #e5e7eb; color: #334155; font-size: 15px; line-height: 54px; text-align: left; background: #ffffff; }
	.header-menu-close { box-sizing: border-box; width: calc(100% - 32px); height: 48px; margin: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 6px; color: #334155; font-size: 14px; line-height: 48px; background: #eef2f6; }

	.group-title { font-size: 16px; font-weight: 700; }

	.module-hero-icon, .operation-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
	}
	.operation-info { display: flex; min-width: 0; flex: 1; flex-direction: column; margin-left: 11px; }

	.inline-back { height: 48px; padding: 0 4px; color: #42617f; font-size: 13px; line-height: 48px; background: transparent; }
	.module-hero { display: flex; align-items: center; margin-top: 5px; padding: 17px; border-radius: 13px; background: #e7f0ff; }
	.module-hero-inbound { background: #e1f7f0; }
	.module-hero-inventory { background: #fff3da; }
	.module-hero-query { background: #f0e9ff; }
	.module-hero-icon { width: 52px; height: 52px; flex-shrink: 0; margin-right: 13px; border-radius: 14px; color: #ffffff; font-size: 18px; background: $primary; }
	.module-hero-title { font-size: 18px; font-weight: 700; }
	.module-hero-desc { margin-top: 4px; color: #617187; font-size: 11px; }
	.group-title { display: block; margin: 22px 2px 11px; }
	.operation-list { overflow: hidden; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 15px rgba(32, 67, 111, 0.06); }
	.operation-item, .history-item { display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: 72px; padding: 12px; border-bottom: 1px solid #edf0f3; text-align: left; background: #ffffff; }
	.operation-item-disabled, .operation-item-disabled[disabled] { color: #8d98a6; opacity: 1; background: #f2f4f6; }
	.operation-item-disabled .operation-icon { color: #8b97a5; background: #e3e7eb; }
	.operation-item-disabled .operation-desc { color: #929daa; }
	.operation-item:last-child, .history-item:last-child { border-bottom: 0; }
	.operation-icon { width: 39px; height: 39px; flex-shrink: 0; border-radius: 10px; color: #366cae; font-size: 12px; background: #edf4fd; }
	.operation-name { font-size: 13px; font-weight: 700; }
	.operation-desc { margin-top: 4px; color: $text-secondary; font-size: 11px; line-height: 17px; }
	.operation-count { min-width: 22px; height: 22px; border-radius: 11px; color: #ffffff; font-size: 11px; line-height: 22px; text-align: center; background: $danger; }
	.operation-prototype { flex-shrink: 0; padding: 5px 7px; border-radius: 5px; color: #737f8d; font-size: 11px; background: #e1e5e9; }
	.operation-arrow { margin-left: 8px; color: #9aa5b1; font-size: 21px; }
	.module-empty-note { margin-top: 14px; padding: 12px; border-radius: 9px; color: #758194; font-size: 11px; line-height: 18px; text-align: center; background: #e9eef5; }

	.operation-page { padding-top: 12px; }
	.operation-page-title-row, .operation-scan-row, .task-toolbar, .prototype-task-head, .prototype-task-meta, .prototype-task-foot { display: flex; align-items: center; }
	.operation-page-title-row { justify-content: space-between; gap: 12px; margin: 7px 2px 14px; }
	.operation-page-title, .operation-page-subtitle, .operation-scan-label, .operation-scan-tip, .operation-metric-value, .operation-metric-label, .prototype-task-title { display: block; }
	.operation-page-title { font-size: 21px; font-weight: 700; }
	.operation-page-subtitle { margin-top: 4px; color: $text-secondary; font-size: 11px; }
	.prototype-badge { flex-shrink: 0; padding: 6px 9px; border-radius: 6px; color: #45617f; font-size: 11px; background: #e4edf8; }
	.operation-scan-card { padding: 15px; border-radius: 13px; background: #ffffff; box-shadow: 0 4px 15px rgba(32, 67, 111, 0.07); }
	.operation-scan-label { margin-bottom: 9px; font-size: 12px; font-weight: 700; }
	.operation-scan-row { gap: 8px; }
	.operation-scan-input { box-sizing: border-box; height: 48px; min-width: 0; flex: 1; padding: 0 12px; border: 2px solid #8cb7ef; border-radius: 9px; font-size: 13px; background: #fbfdff; }
	.operation-scan-button { width: 68px; height: 48px; flex-shrink: 0; border-radius: 9px; color: #ffffff; font-size: 13px; font-weight: 700; line-height: 48px; background: $primary; }
	.operation-scan-tip { margin-top: 8px; color: #718095; font-size: 11px; line-height: 17px; }
	.operation-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; padding: 14px 6px; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 15px rgba(32, 67, 111, 0.06); }
	.operation-metric { display: flex; flex-direction: column; align-items: center; border-right: 1px solid $border; }
	.operation-metric:last-child { border-right: 0; }
	.operation-metric-value { font-size: 22px; font-weight: 700; }
	.metric-primary { color: $primary; }
	.metric-warning { color: $warning; }
	.metric-success { color: $success; }
	.operation-metric-label { margin-top: 3px; color: $text-secondary; font-size: 11px; }
	.task-toolbar { justify-content: space-between; margin: 20px 2px 10px; }
	.operation-group-title { margin: 0; }
	.filter-button { height: 48px; padding: 0 14px; border: 1px solid #dbe2ea; border-radius: 8px; color: #52657c; font-size: 12px; line-height: 46px; background: #ffffff; }
	.prototype-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; padding: 3px; border-radius: 9px; background: #e9edf3; }
	.prototype-tab { height: 48px; border-radius: 7px; color: #5f7085; font-size: 12px; line-height: 48px; background: transparent; }
	.prototype-tab.active { color: $primary; font-weight: 700; background: #ffffff; box-shadow: 0 2px 7px rgba(38, 71, 112, 0.12); }
	.prototype-task-list { display: flex; flex-direction: column; gap: 10px; }
	.prototype-task-card { padding: 14px; border: 1px solid #e7ebf0; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 13px rgba(32, 67, 111, 0.05); }
	.prototype-task-head { justify-content: space-between; gap: 8px; }
	.prototype-task-code { color: #45617f; font-size: 11px; }
	.prototype-task-status { flex-shrink: 0; padding: 5px 8px; border-radius: 5px; font-size: 11px; }
	.status-pending { color: #1f64c8; background: #e2edfc; }
	.status-progress { color: #96610b; background: #fff0cf; }
	.prototype-task-title { margin-top: 9px; font-size: 14px; font-weight: 700; }
	.prototype-task-meta { justify-content: space-between; gap: 8px; margin-top: 7px; color: $text-secondary; font-size: 11px; line-height: 17px; }
	.prototype-task-meta text:last-child { text-align: right; }
	.prototype-task-foot { justify-content: space-between; margin-top: 13px; padding-top: 11px; border-top: 1px solid #edf0f3; }
	.prototype-task-qty { color: #43556b; font-size: 11px; font-weight: 600; }
	.prototype-task-action { min-width: 86px; height: 48px; padding: 0 12px; border-radius: 8px; color: #ffffff; font-size: 12px; line-height: 48px; background: $primary; }
	.operation-empty { display: flex; flex-direction: column; align-items: center; padding: 42px 16px; border-radius: 12px; background: #ffffff; }
	.operation-empty-icon { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; color: $success; font-size: 21px; background: $success-light; }

	.summary-card { display: grid; grid-template-columns: repeat(2, 1fr); padding: 18px; border-radius: 13px; background: #ffffff; box-shadow: 0 4px 15px rgba(32, 67, 111, 0.07); }
	.summary-card > view { display: flex; flex-direction: column; align-items: center; }
	.summary-card > view + view { border-left: 1px solid $border; }
	.summary-number { color: $success; font-size: 28px; font-weight: 700; }
	.summary-number.pending-color { color: $warning; }
	.summary-label { margin-top: 3px; color: $text-secondary; font-size: 11px; }
	.history-empty { display: flex; flex-direction: column; align-items: center; padding: 48px 18px; border-radius: 12px; color: $text-secondary; background: #ffffff; }
	.history-empty-icon { color: #aeb8c4; font-size: 36px; }
	.history-empty-title { margin-top: 12px; color: $text; font-size: 14px; font-weight: 600; }
	.history-empty-desc { margin-top: 6px; font-size: 11px; }
	.history-check { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #ffffff; background: $success; }
	.history-status { flex-shrink: 0; color: $success; font-size: 11px; }

	.profile-content { padding-top: 20px; }
	.profile-card { display: flex; align-items: center; padding: 20px 16px; border-radius: 13px; background: #ffffff; box-shadow: 0 4px 15px rgba(32, 67, 111, 0.07); }
	.profile-avatar { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-right: 14px; border-radius: 50%; color: #ffffff; font-size: 21px; font-weight: 700; background: linear-gradient(145deg, #2b82ed, #155dbb); }
	.profile-name { font-size: 18px; font-weight: 700; }
	.profile-role { margin-top: 5px; color: $text-secondary; font-size: 11px; }
	.profile-list { margin-top: 14px; padding: 0 14px; border-radius: 12px; background: #ffffff; }
	.profile-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid $border; font-size: 13px; }
	.profile-row:last-child { border-bottom: 0; }
	.profile-value { color: $text-secondary; font-size: 12px; }
	.profile-action, .logout-action { box-sizing: border-box; width: 100%; height: 50px; margin-top: 14px; padding: 0 15px; border-radius: 11px; font-size: 13px; line-height: 50px; text-align: left; background: #ffffff; }
	.profile-action { display: flex; justify-content: space-between; color: $text; }
	.logout-action { color: $danger; text-align: center; }
	.logout-dialog-card { box-sizing: border-box; width: calc(100vw - 48px); max-width: 320px; overflow: hidden; border-radius: 12px; background: #ffffff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24); }
	.logout-dialog-title { display: block; padding: 24px 22px 0; color: $danger; font-size: 17px; font-weight: 700; text-align: center; }
	.logout-dialog-content { display: block; padding: 18px 22px 22px; color: $text-secondary; font-size: 14px; line-height: 22px; }
	.logout-dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid $border; }
	.logout-dialog-cancel, .logout-dialog-confirm { height: 52px; border-radius: 0; font-size: 15px; line-height: 52px; background: #ffffff; }
	.logout-dialog-cancel { color: $text; }
	.logout-dialog-confirm { border-left: 1px solid $border; color: $danger; font-weight: 700; }
	.logout-dialog-cancel:active, .logout-dialog-confirm:active { background: #f5f7fa; }

	.modal-sheet {
		box-sizing: border-box;
		width: 100vw;
		max-width: 480px;
		padding: 20px 18px 18px;
		border-radius: 16px 16px 0 0;
		background: $card;
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
	}

	.modal-title {
		display: block;
		margin-bottom: 14px;
		font-size: 16px;
		font-weight: 700;
		text-align: center;
	}

	.modal-empty {
		padding: 26px 10px;
		color: $text-secondary;
		font-size: 13px;
		text-align: center;
	}

	.box-list-item {
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 9px;
		padding: 12px;
		min-height: 64px;
		border-radius: 9px;
	}

	.box-list-item-done { background: #effaf7; }
	.box-list-item-pending { background: #fff8e7; }

	.box-list-info {
		display: flex;
		flex: 1;
		min-width: 0;
		flex-direction: column;
	}

	.box-list-number { font-size: 13px; font-weight: 600; }
	.box-list-detail { margin-top: 4px; color: $text-secondary; font-size: 12px; line-height: 18px; }

	.box-list-tag {
		flex-shrink: 0;
		padding: 5px 8px;
		border-radius: 6px;
		font-size: 12px;
		font-weight: 600;
	}

	.box-list-tag-done { color: #08786c; background: $success-light; }
	.box-list-tag-pending { color: #986407; background: $warning-light; }

	.modal-close-btn {
		width: 100%;
		height: 48px;
		margin-top: 6px;
		border: 1px solid $border;
		border-radius: 9px;
		color: $text-secondary;
		font-size: 14px;
		line-height: 46px;
		background: #ffffff;
	}

	.skip-reasons {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.skip-reason-btn {
		box-sizing: border-box;
		width: 100%;
		min-height: 48px;
		padding: 10px 12px;
		border: 1px solid $border;
		border-radius: 8px;
		color: $text;
		font-size: 13px;
		line-height: 21px;
		text-align: left;
		background: #ffffff;
	}

	.skip-reason-btn.selected {
		border-color: $warning;
		color: #8a5a00;
		background: $warning-light;
	}

	.modal-actions,
	.complete-btns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 16px;
	}

	.modal-cancel-btn,
	.modal-confirm-btn,
	.complete-btn-back,
	.complete-btn-next {
		height: 48px;
		border-radius: 9px;
		font-size: 14px;
		font-weight: 600;
		line-height: 48px;
	}

	.modal-cancel-btn,
	.complete-btn-back {
		border: 1px solid $border;
		color: $text-secondary;
		background: #ffffff;
	}

	.modal-confirm-btn,
	.complete-btn-next {
		color: #ffffff;
		background: $primary;
	}

	.skip-confirm-btn { background: $warning; }

	.partial-modal-title { font-size: 17px; }

	.partial-info {
		display: flex;
		flex-direction: column;
		padding: 12px;
		border-radius: 9px;
		background: $primary-light;
	}

	.partial-info-sku { color: $primary; font-size: 15px; font-weight: 700; }
	.partial-info-desc { margin-top: 4px; color: $text-secondary; font-size: 12px; }
	.partial-info-qty { margin-top: 7px; font-size: 13px; }
	.partial-info-qty text { font-size: 16px; font-weight: 700; }

	.partial-input-row {
		gap: 9px;
		margin-top: 14px;
	}

	.partial-input-label {
		flex-shrink: 0;
		font-size: 13px;
	}

	.partial-input {
		box-sizing: border-box;
		flex: 1;
		min-width: 0;
		height: 48px;
		padding: 0 12px;
		border: 2px solid $primary;
		border-radius: 8px;
		font-size: 18px;
		font-weight: 700;
		text-align: center;
	}

	.partial-input-unit { flex-shrink: 0; color: $text-secondary; font-size: 13px; }

	.partial-quick-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-top: 12px;
	}

	.partial-quick-btn {
		height: 48px;
		padding: 0 6px;
		border: 1px solid #b9c9df;
		border-radius: 7px;
		color: #436080;
		font-size: 12px;
		line-height: 48px;
		background: #f4f8fc;
	}

	.partial-validation { display: block; margin-top: 10px; color: $danger; font-size: 12px; line-height: 18px; }
	.modal-confirm-btn[disabled] { color: #8a9099; background: #e4e6eb; opacity: 1; }
	.decision-desc { display: block; color: $text-secondary; font-size: 13px; line-height: 20px; text-align: center; }
	.submit-decision-modal { padding: 18px 16px 16px; }
	.submit-decision-title { margin-bottom: 8px; text-align: left; }
	.submit-decision-desc { text-align: left; }
	.submit-decision-actions { margin-top: 14px; }
	.decision-summary { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 14px; padding: 12px; border-radius: 10px; background: #f6f8fb; }
	.decision-summary > view { display: flex; flex-direction: column; align-items: center; gap: 3px; color: $text-secondary; font-size: 11px; }
	.decision-summary > view + view { border-left: 1px solid $border; }
	.decision-number { color: $success; font-size: 24px; font-weight: 800; }
	.decision-number.warning { color: $warning; }
	.pending-sku-list { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; padding: 12px; border-radius: 9px; color: #4d5d70; font-size: 12px; background: #f6f8fb; }
	.decision-label { display: block; margin: 16px 0 8px; font-size: 13px; font-weight: 700; }
	.incomplete-reasons { display: flex; flex-direction: column; gap: 8px; }
	.incomplete-reason { box-sizing: border-box; min-height: 48px; padding: 10px 12px; border: 1px solid $border; border-radius: 8px; color: $text; font-size: 13px; line-height: 20px; text-align: left; background: #ffffff; }
	.incomplete-reason.selected { border-color: $danger; color: #a51d1d; background: $danger-light; }
	.danger-confirm { background: $danger; }
	.all-complete-btn { width: 100%; height: 48px; margin-top: 20px; border-radius: 9px; color: #ffffff; font-size: 14px; font-weight: 700; line-height: 48px; background: $primary; }

	.complete-modal {
		box-sizing: border-box;
		width: calc(100vw - 32px);
		max-width: 380px;
		padding: 24px 18px;
		border-radius: 16px;
		background: $card;
		box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
	}

	.complete-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		margin: 0 auto 12px;
		border-radius: 50%;
		color: #ffffff;
		font-size: 30px;
		font-weight: 700;
		background: $success;
	}

	.complete-title,
	.complete-desc {
		display: block;
		text-align: center;
	}

	.complete-title { font-size: 20px; font-weight: 700; }
	.complete-desc { margin-top: 6px; color: $text-secondary; font-size: 12px; }

	.complete-stats {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 18px;
		margin-top: 18px;
		padding: 14px 8px;
		border-radius: 10px;
		background: #f8fafc;
	}

	.complete-stat {
		display: flex;
		min-width: 58px;
		flex-direction: column;
		align-items: center;
	}

	.complete-stat-num { font-size: 22px; font-weight: 700; }
	.complete-stat-label { margin-top: 3px; color: $text-secondary; font-size: 11px; }
	.green { color: $success; }
	.blue { color: #4a7dff; }
	.gray { color: $skip; }
	.red { color: $danger; }

	.app-toast {
		position: fixed;
		z-index: 30;
		top: calc(var(--status-bar-height, 0px) + 70px);
		left: 50%;
		box-sizing: border-box;
		max-width: calc(100% - 40px);
		padding: 10px 16px;
		border-radius: 8px;
		color: #ffffff;
		font-size: 13px;
		line-height: 20px;
		text-align: center;
		background: #374151;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
		transform: translateX(-50%);
	}

	.app-toast.success { background: $success; }
	.app-toast.warning { background: #b77905; }
	.app-toast.error { background: $danger; }

	@media (min-width: 481px) {
		.work-page {
			box-shadow: 0 0 28px rgba(31, 41, 55, 0.11);
		}
	}

	@media (max-width: 340px) {
		.login-page { padding-right: 16px; padding-left: 16px; }
		.header-title { font-size: 18px; }
		.box-select-btn { padding: 0 10px; font-size: 12px; }
		.pick-item { padding-right: 10px; padding-left: 10px; }
		.pick-item-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.pick-btn-confirm { grid-column: 1 / -1; }
		.processed-actions { grid-template-columns: 1fr; }
		.submit-section { gap: 8px; width: calc(100% - 12px); padding-right: 8px; padding-left: 8px; }
		.submit-info { width: 96px; min-width: 96px; }
	}