refactor: colocate frontend component files

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.module.css

@@ -0,0 +1,166 @@
+.list {
+	width: 100%;
+}
+
+.card {
+	min-width: 0;
+	gap: var(--mantine-spacing-xl);
+	background: var(--mantine-color-white);
+	border-color: var(--mantine-color-gray-3);
+	box-shadow: 0 4px 16px rgb(15 23 42 / 3%);
+	color: inherit;
+	text-decoration: none;
+	transition:
+		transform 160ms ease,
+		box-shadow 160ms ease,
+		border-color 160ms ease;
+}
+
+.card:hover,
+.card:focus-visible {
+	border-color: var(--mantine-color-blue-3);
+	box-shadow: 0 12px 28px rgb(15 23 42 / 8%);
+	transform: translateY(-3px);
+}
+
+.card:focus-visible {
+	outline: 2px solid var(--mantine-color-blue-6);
+	outline-offset: 3px;
+}
+
+.identity {
+	min-width: 0;
+}
+
+.kicker {
+	padding: 5px 10px;
+	border-radius: var(--mantine-radius-sm);
+	background: var(--mantine-color-blue-0);
+	color: var(--mantine-color-blue-8);
+	letter-spacing: 0.02em;
+}
+
+.accountIcon {
+	width: 28px;
+	height: 28px;
+	flex-shrink: 0;
+	color: var(--mantine-color-blue-5);
+}
+
+.name {
+	margin: 0;
+	font-size: var(--mantine-h3-font-size);
+	line-height: 1.3;
+	overflow-wrap: anywhere;
+}
+
+.balance {
+	flex: 1;
+}
+
+.summary {
+	font-variant-numeric: tabular-nums;
+}
+
+.total {
+	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
+	letter-spacing: -0.035em;
+	line-height: 1.2;
+	overflow-wrap: anywhere;
+}
+
+.total + .total {
+	font-size: var(--mantine-font-size-lg);
+	font-weight: 500;
+	letter-spacing: 0;
+	color: var(--mantine-color-gray-7);
+}
+
+.positions {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--mantine-spacing-sm);
+	margin: 0;
+}
+
+.positions > div {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 4px var(--mantine-spacing-sm);
+	padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+	border-radius: var(--mantine-radius-md);
+}
+
+.stocks {
+	background: var(--mantine-color-blue-0);
+	color: var(--mantine-color-blue-8);
+}
+
+.bonds {
+	background: var(--mantine-color-grape-0);
+	color: var(--mantine-color-grape-8);
+}
+
+.positions dt {
+	font-size: var(--mantine-font-size-sm);
+	font-weight: 500;
+}
+
+.positions dd {
+	margin: 0;
+	font-size: 1.75rem;
+	font-weight: 700;
+	font-variant-numeric: tabular-nums;
+	line-height: 1.25;
+	overflow-wrap: anywhere;
+}
+
+.footer {
+	border-top: 1px solid var(--mantine-color-gray-2);
+	padding-top: var(--mantine-spacing-md);
+}
+
+.open {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--mantine-spacing-xs);
+	margin-left: auto;
+	color: var(--mantine-color-blue-7);
+}
+
+.arrow {
+	font-size: var(--mantine-font-size-lg);
+	transition: transform 160ms ease;
+}
+
+.card:hover .arrow {
+	transform: translateX(3px);
+}
+
+@media (max-width: 36em) {
+	.card {
+		padding: var(--mantine-spacing-md);
+		gap: var(--mantine-spacing-lg);
+	}
+
+	.positions > div {
+		flex-direction: column;
+		align-items: flex-start;
+		padding: var(--mantine-spacing-sm);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.card,
+	.arrow {
+		transition: none;
+	}
+
+	.card:hover,
+	.card:focus-visible,
+	.card:hover .arrow {
+		transform: none;
+	}
+}